(S) Các thực tiễn tốt nhất về CSS mà bạn chưa biết

Minh họa bởi Paula Jenda

Ngay cả khi bây giờ bạn xây dựng các ứng dụng của mình bằng cách sử dụng một khung công tác phổ biến, như React, Angular hoặc Vue.js, bạn vẫn cần thêm một số kiểu cho chúng. Tùy thuộc vào công nghệ bạn sử dụng, bạn cần viết phong cách của mình một cách cụ thể. Ví dụ, đối với React, do bản chất thành phần của nó, nên tốt hơn là viết các kiểu sử dụng các mô-đun CSS. Nếu bạn muốn sử dụng các tính năng CSS hoàn toàn mới, nên sử dụng CSSNext. Đừng quên về các bộ tiền xử lý CSS tốt, như Sass hoặc LESS. Bạn có thể nghĩ - rất nhiều công cụ, tôi cá rằng phong cách viết là khác nhau đối với mỗi người trong số họ. Vâng bạn đã đúng. Nhưng những điều cơ bản là như nhau.

Trong bài viết này, tôi muốn trình bày một vài mẹo hay để viết CSS mạnh mẽ và có thể duy trì, bất kể bạn là người hâm mộ sử dụng các mô-đun CSS hay Sass / LESS. Các mẹo này được trình bày theo cú pháp SCSS, vì vậy nếu bạn cần một số giới thiệu về Sass, thì đây là một nơi tốt để bắt đầu. Nếu bạn sử dụng CSS đơn giản, được mở rộng bởi CSS Tiếp theo, bài viết này cũng dành cho bạn. Những khái niệm cơ bản này có thể dễ dàng được sử dụng trong các công cụ hoặc bộ tiền xử lý CSS khác.

Cấu trúc phong cách của bạn

Cấu trúc thư mục được suy nghĩ tốt sẽ giúp duy trì dự án của bạn. Điều tương tự cũng xảy ra với phong cách của bạn. Điều quan trọng là phân chia mã của bạn theo các yếu tố mà họ đề cập đến. Lưu trữ tất cả các quy tắc của bạn trong một tệp style.scss lớn sẽ gây rắc rối chắc chắn. Đặc biệt nếu bạn muốn mở rộng quy mô dự án của bạn và thêm các thành phần mới.

Về mặt dự án, chia tỷ lệ, nó rất quan trọng để thiết lập cấu trúc kiểu phù hợp. Bạn nên tập trung vào việc cung cấp cấu trúc, sẽ sắp xếp các tệp của bạn theo các thành phần bạn sử dụng trong dự án của mình. Tôi đề nghị bạn nên tách các kiểu cơ sở khỏi các kiểu thành phần và các chủ đề. Ngoài ra, sẽ hợp lý khi kết hợp tất cả các mixin và biến trong một thư mục, tùy thuộc vào vai trò của chúng.

Dưới đây là một cấu trúc thư mục ví dụ:

Và main.scss:

Đặt tên cho màu sắc

Vì vậy, bạn có một thiết kế trang web và bạn muốn bắt đầu với bố cục mã hóa. Điều gì sẽ là một cách tiếp cận khôn ngoan để quản lý màu sắc trong dự án của bạn? Đơn giản là bạn có thể viết các giá trị màu trực tiếp trong các quy tắc phong cách. Nhưng cách tiếp cận này có thể gây rắc rối trong tương lai. May mắn thay, cả CSS và Sass đều cho chúng ta các biến.

Trong Sass, bạn có thể lưu trữ bất kỳ giá trị nào dưới dạng biến, do đó, hợp lý để lưu trữ giá trị màu dưới dạng biến. Hầu hết, chúng tôi sử dụng HEX (hexadecimals) để xác định giá trị màu. Đối với con người, HEX trông giống như cypher, bởi vì nó là một định dạng được thiết kế cho máy tính. Thật khó để nói màu nào được viết là # 7fffd4 hoặc # ffd700 (nếu bạn hiểu chúng, có thể bạn sẽ thất bại trong việc kiểm tra CAPTCHA). Cái đầu tiên là aquamarine và cái thứ hai là vàng. Sẽ dễ dàng hơn khi có những màu sắc được đặt tên theo cách đó?

Một số màu sắc có vai trò cụ thể trong thiết kế trang web. Một màu có thể được sử dụng làm màu thương hiệu, màu còn lại dành cho nền. Mặc dù, chúng tôi viết mã cho trình duyệt, chúng tôi nên xây dựng một số cấu trúc mạnh mẽ cho màu sắc của chúng tôi. Thật tốt khi có sự giúp đỡ của nhà thiết kế. Nếu bạn có thể thuyết phục anh ấy mô tả bảng màu, bạn vẫn có thể tự làm điều đó.

Đầu tiên, bạn nên bắt đầu với việc đặt tên màu của bạn. Chắc chắn, nó khó có thể dịch giá trị HEX sang tên người có thể đọc được. May mắn thay, chúng tôi có các công cụ thích hợp cho điều đó. Tôi sử dụng trang web Name that Color, nhưng bạn có thể sử dụng bất kỳ công cụ nào khác mà bạn thích.

Khi bạn có tên cho màu sắc của mình, bạn có thể gán vai trò cho chúng. Bạn nên xác định màu nào được sử dụng làm màu chính và màu nào là màu phụ. Nếu bạn không chắc chắn cách đặt vai trò cho màu sắc của mình, bạn có thể lấy một số cảm hứng từ sơ đồ màu của Bootstrap.

Dưới đây, một thiết lập màu ví dụ:

Làm phẳng các tờ khai lồng nhau

Sử dụng bộ tiền xử lý CSS không chỉ thêm một số chức năng hữu ích vào bộ công cụ của bạn mà còn giúp tổ chức mã. Ví dụ tốt nhất là kiểu khai báo lồng nhau. Trong Sass, nó có thể lồng bộ chọn trong các bộ chọn khác, để bạn có thể thấy những gì mà mối quan hệ giữa chúng. Nó có tính năng thực sự mạnh mẽ, vì vậy nó có thể bị lạm dụng khá dễ dàng.

Tôi đề nghị bạn không nên đi quá 3 cấp độ sâu. Quy tắc này áp dụng cả cho tính đặc hiệu của bộ chọn và bộ chọn lồng trong bộ tiền xử lý CSS. Vượt quá giới hạn đó không chỉ làm tăng sức mạnh của bộ chọn, mà còn có thể làm cho việc đọc mã của bạn trở nên khó khăn hơn.

Xem một ví dụ dưới đây:

Don kèm theo quá lạm dụng cha mẹ

Trong Sass, nó có thể nhận được tham chiếu của bộ chọn cha mẹ. Kết hợp với lồng nhau, bạn có thể xác định các quy tắc cần bộ chọn cha mẹ. Ví dụ:

Đôi khi, sử dụng & có thể gây hiểu nhầm. Dưới đây, một ví dụ về cách sử dụng xấu của bộ chọn đó:

Như bạn có thể thấy, bộ chọn ampersand có thể thêm độ phức tạp không cần thiết vào kiểu của bạn và làm cho việc đọc mã của bạn trở nên khó khăn.

Viết các thuộc tính theo thứ tự có ý nghĩa

Bạn không cần phải sắp xếp các thuộc tính của mình, nhưng bạn nên làm vậy. Các thuộc tính được sắp xếp hợp lý chỉ ra rằng kiểu mã của bạn là nhất quán. Thêm gì nữa, nó làm cho việc quét mã của bạn thuận tiện hơn. Không có một nguồn sự thật nào về mặt sắp xếp các thuộc tính. Bạn có thể sắp xếp chúng theo thứ tự abc hoặc theo bất kỳ ưu tiên nào khác. Tôi sử dụng các quy tắc sửa đổi một chút bao gồm trong hướng dẫn định dạng của phương pháp SMACSS. Đây là thứ tự đề nghị của tôi:

  • Hộp (vị trí, hiển thị, chiều rộng, lề, v.v.)
  • Bản văn
  • Lý lịch
  • Biên giới
  • Khác (theo thứ tự chữ cái)

Sử dụng quy ước đặt tên lớp

Khi dự án của bạn phát triển, các phong cách có thể trở nên khá lộn xộn. Đặc biệt, khi bạn cần mở rộng các quy tắc hiện có. Thật không may, CSS không cung cấp bất kỳ cơ chế hữu ích nào, điều này sẽ ngăn chặn xung đột không gian tên. Nói cách khác, tất cả các kiểu được viết bằng CSS là toàn cục, do đó, rất có thể bạn có thể bất ngờ ghi đè lên một số thuộc tính.

Do tính chất xếp tầng của CSS, nó rất quan trọng để xác định các bộ chọn rất cụ thể. Nó không có nghĩa là bạn nên sử dụng các bộ chọn với độ đặc hiệu cao. Bạn cần tránh các bộ chọn chung, như bộ chọn thẻ, khi bạn muốn thêm kiểu cho thành phần cụ thể.

Dưới đây là một ví dụ:

Hy vọng rằng, viết các kiểu có thể duy trì không khó lắm, khi chúng ta có thể sử dụng một trong các quy ước đặt tên lớp phổ biến - BEM, OOCSS hoặc SMACSS. Tôi thích BEM, một phương pháp rất phổ biến được tạo ra bởi các nhà phát triển Yandex. Tên của nó là từ viết tắt của khối, từ bổ nghĩa và các từ nguyên tố. Nếu bạn không quen thuộc với BEM, tôi khuyên bạn nên đọc tài liệu của nó.

Dưới đây, ví dụ của chúng tôi, sau khi bemization:

Viết truy vấn phương tiện mô tả

Truy vấn phương tiện truyền thông là phần quan trọng nhất của phát triển trang web đáp ứng. Nhờ có chúng, chúng tôi có thể xác định kiểu cho các độ phân giải khác nhau và thay đổi bố cục theo thiết bị của người dùng. Trong CSS, các truy vấn phương tiện là một tập hợp các quy tắc, được kiểm tra đối với trình duyệt của người dùng. Khi hoàn thành, các kiểu được xác định trong khối truy vấn phương tiện được áp dụng cho trang web.

Bạn có thể nhắm mục tiêu các thiết bị khác nhau bằng các truy vấn, mô tả các loại và tính năng của phương tiện truyền thông. Do kết hợp nhiều quy tắc, truy vấn phương tiện có thể trở nên phức tạp khá dễ dàng.

Để làm cho các truy vấn phương tiện trở nên thân thiện với nhà phát triển hơn, chúng ta có thể gán cho nó các quy tắc của nó cho một biến. Trong Sass, nó có thể sử dụng chuỗi như mã CSS bình thường bằng cách sử dụng dấu ngoặc nội suy # {}.

Thủ thuật tương tự chúng ta có thể sử dụng cho các quy tắc khác. Nó có thể hữu ích để xác định các quy tắc @supports phức tạp.

Thêm kiểu mô-đun

CSS có một bộ các bộ chọn rất hữu ích. Trong hầu hết các trường hợp, bạn sử dụng bộ chọn lớp hoặc bộ chọn con cháu. Nhưng có một bộ chọn khác, có hiệu quả để viết các kiểu mô-đun. Nó cải tiến bộ chọn anh chị em liền kề, còn được gọi là bộ chọn cộng.

Hãy để tưởng tượng rằng bạn muốn viết các kiểu chỉ được áp dụng khi một số phần tử đi trước phần tử chọn phần tử. Ví dụ: bạn có thể thêm lề vào văn bản Bài viết, khi nó có tiêu đề. Đây là cách bạn có thể làm điều đó:

Nó là một cách rất thuận tiện để xác định phong cách, và phong cách yêu thích của tôi. Nhưng có một số sự đánh đổi. Trước hết, nó không phải là bộ chọn hiệu quả nhất. Nếu bạn quan tâm nhiều hơn đến hiệu suất hơn là tính mô đun, bạn không nên sử dụng nó. Thứ hai, sử dụng bộ chọn anh chị em làm tăng tính đặc hiệu, do đó có thể khó ghi đè lên các kiểu của nó sau này. Xét cho cùng, nó rất đáng để sử dụng nó, khi bạn muốn áp dụng các kiểu dựa trên sự hiện diện của các yếu tố.

đọc thêm

Bây giờ, bạn biết làm thế nào để viết các phong cách có thể đọc, duy trì và mô-đun. Nếu bạn cần thêm lời khuyên làm thế nào để viết phong cách để tự hào, hãy xem các bài viết sau:

  • Biến màu Sass mà Don băng Suck của Landon Schropp
  • SCSS nâng cao, hoặc 16 điều tuyệt vời mà bạn có thể chưa biết Các bảng định kiểu của bạn có thể làm được bởi Jarno Rantanen
  • Thông số kỹ thuật chọn anh chị em liền kề của W3C
  • Các quy ước đặt tên CSS dạng mô-đun của John W. Long
  • Thiết kế Web đáp ứng trong Sass của Mason Wendell
  • Cách cấu trúc một dự án Sass của John W. Long

Bạn thích nó? Nhấn nút!! Cảm ơn bạn!

Bạn có thể tìm thấy tôi trên Twitter và Github.