BEM CSS nâng cao
Khi nói đến việc phát triển các ứng dụng lớn, đảm bảo tổ chức được sắp xếp trang nhã trở thành một trong những nhiệm vụ hàng đầu. Kiểm tra xem các tệp thành phần có phải là PascalCase hay không, các biến nghe có vẻ hợp lý (không có tên lạ, bạn không biết ai đang xem Github của mình) và không có quá nhiều đoạn mã/nhận xét lớn. Bạn biết bạn là ai. Những người viết “mã này xấu quá, không biết nó hoạt động nhưng tôi đã dành 5 giờ cho nó nên hãy vặn nó đi. ” Show Ứng dụng lớn cũng có nghĩa là số lượng lớn kiểu dáng. Đây là nơi sử dụng Sass sẽ có lợi Sass là một bộ tiền xử lý cho CSS. Nó cho phép bạn sử dụng các tính năng trong kiểu dáng của mình mà CSS không có (ví dụ:. lồng nhau, mà chúng tôi sẽ đề cập sau), từ đó giúp bạn viết mã DRYer. Có hai kỹ thuật được khuyến nghị để cấu trúc kiểu dáng Sass của bạn. Phương pháp Block Element Modifier(BEM) và kiến trúc 7–1. Sử dụng Sass với hai kỹ thuật này sẽ tạo ra một cơ sở mã sạch hơn, gọn gàng hơn. Chưa kể, nó làm cho ứng dụng của bạn dễ bảo trì hơn và cho phép cộng tác dễ dàng hơn giữa các nhóm BEM là một phương pháp về cách đặt tên cho các lớp phần tử HTML. Tên lớp BEM có nghĩa là đơn giản và dễ hiểu. Tên lớp được định dạng là. Sass/ 1 (khối công cụ sửa đổi dấu gạch ngang kép của phần tử gạch dưới)Hãy xem ví dụ này
BEM với NestingMột trong những tính năng phổ biến của Sass là lồng. BEM song hành với việc làm tổ của Sass. Nesting cho phép bạn xác định cấu trúc phân cấp của bộ chọn và đó là lối tắt để mã hóa các quy tắc tạo kiểu CSS của bạn. Nói cách khác, ít dòng mã hơn. Ví dụ Sass/ 5 chỉ ra phần tử cha, khối, là Sass/ 6. Trong CSS, mã sẽ giống nhưBạn có nhận thấy cách Sass ít lặp lại hơn không? 7–1 Kiến trúcMột cách phổ biến khác để cấu trúc các ứng dụng Sass là sử dụng kiến trúc 7–1. Mẫu 7–1 chỉ ra rằng chúng tôi tạo 7 thư mục và 1 tệp Sass chính nơi chúng tôi nhập tất cả các tệp từ 7 thư mục này. Kỹ thuật này thường được sử dụng cho các dự án lớn với nhiều trang. Hãy xem cấu trúc ví dụ này Sass/ Như bạn có thể thấy, chúng tôi có 7 thư mục ở đây và 1 thư mục chính. scss tất cả trong thư mục Sass mẹ. Ghi chú. Bạn KHÔNG cần chính xác 7 thư mục. Bạn có thể có ít hơn Lưu ý các dấu gạch dưới hàng đầu trong tên tệp. Những tập tin này được gọi là partials. Partials là các tệp nhỏ của đoạn mã Sass. Dấu gạch dưới chỉ ra rằng tệp là một phần và nó không nên được biên dịch thành CSS. Mục đích của partials là để tránh có một tệp CSS cực lớn với tất cả kiểu dáng của ứng dụng. Điều này có thể khó đọc qua và duy trì Nhập một phần vào chính. scsstrong chính. scss, chúng tôi nhập tất cả các phần. Vấn đề đặt hàng. Thứ tự nhập của bạn là thứ tự mà Sass sẽ tuân theo trong quá trình xử lý. Nguyên tắc chung là có tất cả các tệp "logic" (mixin, biến, hàm) ở trên cùng. chính. tệp scss sẽ trông như thế này Sass/ 0Sau khi khám phá thêm về Sass, tôi thấy nó thú vị và dễ sử dụng. Nó đã biến mã của tôi trở nên bóng bẩy và chính xác hơn một cách kỳ diệu. Tôi hy vọng bạn cũng học nó và kết hợp nó vào dự án tiếp theo của bạn. CSS có tốt không?Lợi ích khi sử dụng BEM
. BEM cũng cung cấp mối quan hệ giữa CSS và HTML. Những cái tên mơ hồ khó duy trì trong tương lai. Nhìn chung, BEM là sơ đồ đặt tên CSS yêu thích của tôi và tôi thực sự khuyên bạn cũng nên thử sử dụng nó.
Là tốt lỗi thời?Vì xung đột lớp giữa các thành phần không còn là vấn đề nữa nên rất nhiều nhà phát triển hiện coi BEM đã lỗi thời .
Phương pháp BEM trong CSS là gì?BEM là phương thức đặt tên giao diện người dùng để tổ chức và đặt tên cho các lớp CSS . Phương pháp Khối, Phần tử, Công cụ sửa đổi là quy ước đặt tên phổ biến cho tên lớp trong HTML và CSS. Nó giúp viết CSS rõ ràng bằng cách tuân theo một số quy tắc đơn giản.
Là tốt phổ biến?Theo State of CSS, BEM là phương pháp phổ biến nhất với các lập trình viên mới và những người đã tiếp xúc lâu năm . 5. |