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. ”

Thành thật mà nói, có bao nhiêu bạn đã từng cảm thấy như vậy trước đây?

Ứ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

TỐT

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/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
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

  • Block có thể được coi là “container” hoặc “parent” cho các phần tử lồng nhau/con của nó. Nó cung cấp một kết nối rõ ràng giữa các phần khối. Khối ở đây là thanh điều hướng
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    2 với lớp “nav”
  • Phần tử là “con” của khối. Đây là những đứa trẻ ________ 13 ________ 14 ________ 15 ________ 16. Tên lớp là
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    7,
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    0,
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    1
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    2
  • Công cụ sửa đổi mô tả sự thay đổi về hình thức hoặc hành vi của phần tử. Ở đây, nút điều hướng có một công cụ sửa đổi, đó là
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    3. Tên lớp của nút là
    Sass/
    |
    |– abstracts/
    | |– _variables.scss # Sass Variables
    | |– _mixins.scss # Sass Mixins
    | |– _functions.scss # Sass Functions
    |
    |– vendors/
    | |– _icons.scss # Font-Awesome Icons
    |
    |– base/
    | |– _reset.scss # Reset
    | |– _typography.scss # Typography rules
    | |– _animations.scss # Animation rules
    | |– _utilities.scss # Utility rules
    |
    |– layout/
    | |– _navigation.scss # Navigation
    | |– _header.scss # Header
    | |– _footer.scss # Footer
    |
    |– components/
    | |– _buttons.scss # Buttons
    | |– _card.scss # Card
    | |– _form.scss # Form
    |
    |– pages/
    | |– _home.scss # Home page style
    | |– _contact.scss # Contact page style
    | |– _about.scss # About page style
    |
    |– themes/
    | |– _pink.scss # Pink theme
    | |– _mint.scss # Mint theme
    |
    – main.scss # Main Sass input file
    2

BEM với Nesting

Mộ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/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
5 chỉ ra phần tử cha, khối, là
Sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
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úc

Mộ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/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file

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. scss

trong 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/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _functions.scss # Sass Functions
|
|– vendors/
| |– _icons.scss # Font-Awesome Icons
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _animations.scss # Animation rules
| |– _utilities.scss # Utility rules
|
|– layout/
| |– _navigation.scss # Navigation
| |– _header.scss # Header
| |– _footer.scss # Footer
|
|– components/
| |– _buttons.scss # Buttons
| |– _card.scss # Card
| |– _form.scss # Form
|
|– pages/
| |– _home.scss # Home page style
| |– _contact.scss # Contact page style
| |– _about.scss # About page style
|
|– themes/
| |– _pink.scss # Pink theme
| |– _mint.scss # Mint theme
|
– main.scss # Main Sass input file
0

Sau 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.