Thông thường, tôi không phải là người thích những lời sáo rỗng về động lực. Tuy nhiên, biến thất bại thành cơ hội thành công có thể đúng khi làm việc với Sass (hoặc bất kỳ trình biên dịch CSS nào). Chịu đựng tôi và tôi sẽ giải thích
Hãy bắt đầu với một lỗi
Nếu bạn đã viết CSS bằng Sass, chắc chắn bạn đã thấy lỗi biên dịch. Trong dòng lệnh, nó trông giống như thế này
Syntax error: Invalid CSS after ".module": expected "{", was "}"
Đôi khi bạn có thể không bắt lỗi đó trong dòng lệnh. Tuy nhiên, chắc chắn bạn sẽ gặp lỗi khi chuyển sang trình duyệt vì mọi thứ dường như bị hỏng
Phản ứng đầu tiên của bạn có thể là ngay lập tức quay lại trình soạn thảo văn bản, sửa lỗi cú pháp mà bạn vừa giới thiệu và xem mọi thứ trở lại bình thường. Nhưng chờ một giây. Đây có thể là một trong những khoảnh khắc “biến thất bại thành cơ hội”
Phá vỡ sass có thể là một cơ hội tuyệt vời để xem trang web của bạn trong tình trạng khỏa thân, hoàn toàn không mặc quần áo. Không có kiểu dáng, chỉ là HTML thuần túy, không bị ô nhiễm, bản chất của trang web là cốt lõi của nó. Bạn thấy đấy, khi trình duyệt đưa ra yêu cầu, nó thường nhận lại một tệp .html—siêu văn bản thuần túy—và chỉ có vậy. Mọi thứ khác (tôi. e. CSS và Javascript) là một cải tiến. Như Jeremy Keith nói,
“Mỗi dòng CSS bạn viết là một gợi ý. Bạn không chỉ định cách hiển thị HTML; . Tôi thấy đó là một ý tưởng rất tự do và mạnh mẽ. ”
Quy tắc kiểu CSS là một số cải tiến đầu tiên bạn áp dụng cho tài liệu HTML và đóng vai trò là đề xuất chứ không phải lệnh đối với giao diện của trang. Nhìn thấy những kiểu phá vỡ đó có thể là cơ hội để dừng lại và phân tích cốt lõi trang web của bạn—HTML—và cải thiện nó nếu cần. HTML là một định dạng lâu đời đã xuất hiện từ khá lâu. Trang web đầu tiên không chỉ hoạt động mà còn đáp ứng hiệu quả.
Như Ian Yates đã nói,
“Tất cả các trang web đều phản hồi theo mặc định, cho đến khi chúng tôi bắt đầu thêm các kiểu và phá vỡ chúng. ”
Khi nhìn vào HTML thuần túy của trang của bạn, hãy tự hỏi mình những câu hỏi như.
- Cấu trúc HTML của trang web của tôi có hợp lý không, tôi. e. bản thân nó có thể đọc và hiểu được mà không cần bất kỳ CSS (hoặc JavaScript) nào không?
- Tôi có đánh dấu đúng nội dung của mình không, tôi. e. <ul> đối với danh sách các mục không có thứ tự nhưng lại là một <dl> khi xác định mối quan hệ giữa các mục?
- Tôi có đang biểu thị các biến thể giàu ngữ nghĩa trong văn bản bằng cách sử dụng các thẻ như <strong> và <em> khi thích hợp, thay vì các thẻ chung chung như <span> không?
tôi có ý này. bạn thử nghiệm điều này trên trang web hiện có của riêng bạn ngay bây giờ thì sao?
Mẹo. Ngoài ra, các tiện ích mở rộng chẳng hạn như plugin Nhà phát triển web dành cho Chrome sẽ cho phép bạn dễ dàng chuyển đổi các kiểu CSS
Nhìn kìa. Trên trang web của riêng tôi, tôi đã tìm thấy chỗ để cải thiện. Có một số phần tử HTML không cần thiết nếu không có JavaScript. Tôi nên xóa những thứ đó để ban đầu chúng không xuất hiện trong DOM và thêm chúng sau này bằng JavaScript dưới dạng cải tiến. Ngoài ra, một số thành phần danh sách có thể được điều chỉnh và thống nhất về ngữ nghĩa. Nhưng đây không phải là về tôi, hãy quay lại nói về trang web của bạn
Trang web của bạn
Duyệt qua trang “trần trụi” của bạn và thử đọc nội dung. Liệu nó có ý nghĩa? . HTML là những gì cấu thành trang web của bạn ở mức cơ bản nhất. Justin Jackson có một ví dụ tuyệt vời về điều này. Khi bạn đã có một số HTML chắc chắn, có ngữ nghĩa để bắt đầu, bạn có thể yên tâm rằng ngay cả khi không có gì khác trên trang của bạn tải ngoài HTML, người dùng vẫn có thể đọc và hiểu thông điệp của bạn (các công cụ tìm kiếm cũng vậy).
a11y
Nội dung có thể truy cập toàn cầu là đối tượng thuê cốt lõi của web và luôn là một nơi tuyệt vời để bắt đầu. Phát biểu vào năm 2004 về cách tiếp cận ngữ nghĩa, dễ tiếp cận này đối với thiết kế web, Jeffery Veen đã tuyên bố,
“[Tôi cung cấp] các giải pháp cho khách hàng của mình ít phức tạp hơn để triển khai, dễ bảo trì hơn nhiều, chi phí phục vụ ít hơn theo cấp số nhân, hoạt động trên nhiều trình duyệt và thiết bị, hoạt động tốt hơn trong xổ số công cụ tìm kiếm và — tất nhiên — . Và cố gắng tranh luận với giá trị kinh doanh của điều đó. Và đó là lý do tại sao tôi không quan tâm đến khả năng tiếp cận. Bởi vì khi thiết kế Web được thực hành như một nghề thủ công chứ không phải là một sự an ủi, khả năng truy cập sẽ miễn phí. ”
Phần kết luận
Vì vậy, lần tới khi bạn đang điều chỉnh CSS của trang web bằng Sass và gặp phải lỗi biên dịch, hãy coi đó là cơ hội để kiểm tra nội dung và cấu trúc thực sự của trang web của bạn. HTML. Đó có thể là một trong những khoảnh khắc mà sự thất bại kết thúc bằng cơ hội làm giàu thực sự mà lẽ ra đã bị bỏ lỡ.