Hiểu phương pháp viết CSS

Trong bài viết này, chúng tôi sẽ xem phương pháp viết CSS là gì, một số phương pháp nổi tiếng và cách chúng có thể hữu ích cho chúng tôi trong việc tối ưu hóa mã CSS của chúng tôi. Hãy bắt đầu với câu hỏi đơn giản nhất để có được quả bóng lăn. Phương pháp học là gì?

Một phương pháp là một hệ thống các phương pháp. Hãy nghĩ về một phương pháp đơn giản là một cách làm một cái gì đó một cách có hệ thống, theo một cách làm nhất định được thực hiện để đạt được kết quả mà chúng ta muốn.

Để có kết quả tốt hơn, chúng tôi cải thiện phương pháp của mình bằng cách lập kế hoạch tốt hơn, thay đổi thứ tự, đơn giản hóa các bước - bất cứ điều gì hoạt động nhanh hơn và hơn thế nữa hiệu quả.

Phương pháp CSS

Bây giờ hãy nói về phương pháp CSS. Cũng giống như mọi thứ trong cuộc sống, chúng ta cũng có một phương pháp viết CSS: một số viết lại CSS trước, một số kiểu bố cục cuối cùng, một số bắt đầu với hai đến ba lớp để tạo kiểu cho một phần tử, một số viết tất cả các mã CSS một tập tin duy nhất.

Các phương pháp ưa thích của chúng tôi đã được thiết lập một mình theo thời gian hoặc bị ảnh hưởng bởi những người khác hoặc được yêu cầu tại nơi làm việc của chúng tôi hoặc do tất cả các điều trên. Nhưng theo thời gian, các cựu chiến binh CSS đã hình thành phương pháp để viết CSS đó là nhiều hơn linh hoạt, xác định, tái sử dụng, dễ hiểu và quản lý.

Chúng ta sẽ xem xét các phương pháp được xây dựng, bao gồm:

OOCSS (CSS hướng đối tượng)
BEM (Khối, Phần tử, Công cụ sửa đổi)
ACSS (CSS nguyên tử)
SMACSS (Kiến trúc mô đun và có thể mở rộng cho CSS)

chú thích: Không có khái niệm nào được đề cập dưới đây nên bị nhầm lẫn với bất kỳ khung, thư viện hoặc công cụ nào có thể có cùng tên và khái niệm như các phương pháp này. Bài viết này chỉ nói về các phương pháp để viết CSS.

1. OOCSS

Được phát triển bởi Nicole Sullivan vào năm 2008, các khái niệm chính của OOCSS (CSS hướng đối tượng) bao gồm CSS vật xác định, tách biệt cấu trúc và kiểu trực quan và tránh các kiểu dựa trên vị trí.

Trong OOCSS, bước đầu tiên mà Nicole đề xuất chúng ta làm là xác định các đối tượng trong CSS.

“Về cơ bản, một "đối tượng" CSS là một mẫu hình ảnh lặp lại, có thể được trừu tượng hóa thành một đoạn độc lập của HTML, CSS và có thể là JavaScript. Đối tượng đó sau đó có thể được sử dụng lại trong suốt một trang web. - Nicole Sullivan, Github (OOCSS)“

Lấy ví dụ cấu trúc này từ trang web này. Đây là một cái gì đó là một mẫu hình ảnh lặp lại và có HTML và / hoặc CSS độc lập của riêng nó:

Chúng tôi có ở đây hai loại đối tượng, một bản xem trước lớn hơn của các tiêu đề mà chúng tôi sẽ đặt tên hậu xem trước và một thanh bên với tiêu đề mà chúng tôi sẽ đặt tên hậu xem trước.

Chúng ta cần phải cấu trúc và da riêng biệt (tức là các kiểu tạo ra diện mạo của các đối tượng). Hai loại đối tượng có cấu trúc khác nhau, một loại nằm trong một hộp lớn hơn mặc dù chúng trông giống nhau, với hình ảnh bên trái và tiêu đề ở bên phải.

Hãy cho hình ảnh của cả hai đối tượng một lớp hậu xem hình ảnh và thêm mã đặt hình ảnh bên trái. Điều này ngăn chúng ta khỏi phải lặp lại mã về nơi đặt hình ảnh bên trong các đối tượng trong CSS. Nếu có các đối tượng tương tự khác, chúng tôi sử dụng lại hậu xem hình ảnh cho họ.

Tách da cũng có thể được thực hiện cho các kiểu đơn giản hơn như biên giới hoặc nguồn gốc. Nếu bạn có nhiều đối tượng có cùng đường viền màu xanh, tạo một lớp riêng cho đường viền màu xanh và thêm nó vào các đối tượng sẽ giảm số lần các đường viền màu xanh phải được mã hóa trong CSS.

Nicole cũng gợi ý cho không phải thêm kiểu dựa trên vị trí, ví dụ: thay vì nhắm mục tiêu tất cả các liên kết bên trong một div cụ thể để làm nổi bật, hãy cung cấp cho các liên kết đó một lớp học đánh dấu với các kiểu CSS thích hợp. Bằng cách này khi bạn cần làm nổi bật một liên kết trong một số phần khác của trang, bạn có thể sử dụng lại lớp tô sáng.

Ưu điểm của OOCSS: Mã kiểu dáng trực quan có thể tái sử dụng, mã linh hoạt vị trí, giảm các bộ chọn lồng nhau sâu.

Nhược điểm của OOCSS: Không có số lượng lặp lại các mẫu hình ảnh, việc phân tách cấu trúc và mã kiểu hình ảnh có vẻ không cần thiết.

2. BEM

Được phát triển bởi các nhà phát triển tại Yandex vào năm 2009, các khái niệm chính cho BEM (Khối, Phần tử, Công cụ sửa đổi) bao gồm việc xác định khối, thành phần & bổ nghĩa và đặt tên cho chúng phù hợp.

Một “khối” về cơ bản giống như một “vật”(từ ví dụ trước), một “thành phần” đề cập đến các thành phần của khối (hình ảnh, tiêu đề, văn bản xem trước ở trên xem trước bài viết- các đối tượng). Một “bổ nghĩa” có thể được sử dụng khi trạng thái của khối hoặc thành phần thay đổi, ví dụ: khi bạn thêm một lớp hoạt động vào một mục menu để làm nổi bật nó, lớp hoạt động đóng vai trò là công cụ sửa đổi của bạn.

Khi bạn đã xác định được các thành phần, hãy đặt tên cho chúng. Ví dụ:

một khối menu sẽ có lớp thực đơn
các mặt hàng của nó sẽ có lớp thực đơn (khối và phần tử được phân tách bằng dấu gạch dưới kép)
công cụ sửa đổi cho trạng thái bị vô hiệu hóa của menu có thể có lớp menu_disables (sửa đổi được giới hạn bởi một dấu gạch dưới duy nhất)
công cụ sửa đổi cho trạng thái bị vô hiệu hóa của một mục menu có thể được menu__item_disables.

Đối với sửa đổi, chúng tôi cũng có thể sử dụng giá trị cốt lõi định dạng để đặt tên. Ví dụ: để phân biệt bất kỳ mục menu nào liên kết đến các bài viết lỗi thời, chúng tôi có thể cung cấp cho chúng lớp menu__item_status_obsolete, và để tạo kiểu cho bất kỳ mục menu nào trỏ đến tài liệu đang chờ xử lý, tên lớp có thể là menu__item_status_pending.

Việc đặt tên có thể được sửa đổi thành những gì làm việc cho bạn. Ý tưởng là để có thể xác định, khối, phần tử và sửa đổi từ tên lớp. Kiểm tra một số hệ thống đặt tên được liệt kê trong trang web BEM.

Trang web của BEM cũng liệt kê cách phân tách khối, phần tử và bộ sửa đổi cũng có thể được đưa vào hệ thống tệp CSS. Các khối như “nút” và “đầu vào” có thể có các thư mục riêng chứa các tệp (.css, .js) được liên kết với các khối đó, điều này giúp mọi việc dễ dàng hơn khi chúng ta muốn nhập các khối đó trong các dự án khác.

Ưu điểm của BEM:Dễ dàng sử dụng tên lớp và giảm trong bộ chọn CSS sâu.

Nhược điểm của BEM:Để giữ cho các tên trông có vẻ lành mạnh, BEM khuyên chúng ta nên giữ cho phần tử lồng vào nhau.

3. ACSS

Nổi tiếng bởi Yahoo, đâu đó gần cuối ngày đầu tiên thập kỷ 21^thứ thế kỷ, các khái niệm chính của ACSS bao gồm việc tạo các lớp cho mức độ kiểu dáng nguyên tử nhất, tức là một cặp giá trị thuộc tính, sau đó sử dụng chúng trong HTML khi cần.

Thật khó để xác định khi nào ACSS (CSS nguyên tử) được phát triển lần đầu tiên vì khái niệm này đã được sử dụng một thời gian rồi. Các nhà phát triển đã và đang sử dụng các lớp như .Clearfix tràn: ẩn trong một khoảng thời gian dài. Ý tưởng trong ACSS là có một lớp cho khá nhiều cặp giá trị thuộc tính không liên quan đến nội dung có thể tái sử dụng chúng tôi sẽ cần trong trang web của chúng tôi và để thêm các lớp đó khi cần vào các phần tử HTML.

Dưới đây là một ví dụ về các lớp dựa trên ACSS và cách chúng được sử dụng trong HTML.

 .mr-8 lề-phải: 8px; .fl-r float: right;

Như bạn có thể thấy, số lượng các lớp sẽ tăng cao với phương thức này và HTML sẽ được đông đảo bởi tất cả các lớp đó. Phương pháp này không hiệu quả 100% nhưng có thể hữu ích nếu muốn. Yahoo sử dụng cái này sau tất cả.

Ưu điểm của ACSS:Tạo kiểu HTML mà không cần rời khỏi HTML.

Nhược điểm của ACSS:Quá nhiều lớp học, không gọn gàng và bạn có thể ghét nó.

4. SMACSS

Được phát triển vào năm 2011 bởi Jonathan Snook SMACSS (Kiến trúc có thể mở rộng và mô đun cho CSS) hoạt động bằng cách xác định 5 loại quy tắc phong cách khác nhau. Tên lớp và hệ thống lưu trữ được tạo ra dựa trên những.

“SMACSS là một cách để kiểm tra quy trình thiết kế của bạn và là một cách để phù hợp với các khung cứng nhắc đó vào một quy trình suy nghĩ linh hoạt. - Jonathan Snook”

SMACSS xác định 5 loại quy tắc phong cách cụ thể là cơ sở, bố trí, mô-đun, nhà nước, và chủ đề.

Các kiểu cơ sở là các kiểu mặc định hướng vào các thẻ HTML cơ bản như
, .
Các kiểu bố cục là các kiểu được sử dụng để xác định bố cục của trang, như mã hóa nơi các menu tiêu đề, chân trang và phụ sẽ đi.
Các kiểu mô-đun dành riêng cho một mô-đun như thư viện hoặc trình chiếu.
Kiểu trạng thái là để làm nổi bật các yếu tố với các trạng thái có thể thay đổi như bị ẩn hoặc bị vô hiệu hóa.
Chủ đề được sử dụng để thay đổi sơ đồ trực quan của trang.

Các quy tắc kiểu khác nhau có thể được xác định bằng cách sử dụng tiền tố trong tên lớp, ví dụ như tiêu đề l (đối với bố cục) hoặc tiêu đề t (đối với chủ đề). Chúng tôi cũng có thể tổ chức các loại quy tắc khác nhau này bằng cách đặt chúng vào các tệp và thư mục riêng biệt.

Ưu điểm của SMACSS:Mã được tổ chức tốt hơn.

Nhược điểm của SMACSS: Không tôi có thể nghĩ ra.

Có một cuốn sách trực tuyến miễn phí mà bạn có thể đọc về SMACSS hoặc bạn có thể mua phiên bản ebook của nó để nghiên cứu thêm.

Phần kết luận

Các phương pháp CSS ở trên sẽ cung cấp cho bạn một hệ thống để quản lý và tối ưu hóa mã CSS của bạn. Chúng có thể được kết hợp với nhau, như OOCSS-SMACSS hoặc OOCSS-BEM hoặc BEM-SAMCSS để phù hợp với nhu cầu của bạn.

Ngoài ra còn có các khung và thư viện nếu bạn muốn có một hệ thống tự động để thực hiện các phương pháp CSS như:

Khung OOCSS
Công cụ BEM
Khung CSS hữu cơ (theo khái niệm nguyên tử).