[BEM] Exploring SMACSS: Scalable and Modular Architecture for CSS

https://www.toptal.com/css/smacss-scalable-modular-architecture-css

http://smacss.com

SMACSS — tức là, Kiến trúc có thể mở rộng và mô-đun cho CSS

Base: Kiểu Base xác định phần tử sẽ trông như thế nào ở bất kỳ đâu trên trang.

Layout: Kiểu layout sẽ chia trang thành các phần chính

Thông thường ở đây bạn sẽ tạo kiểu cho những thứ cụ thể cho layout: like border, alignments, margins, etc.

Module: module SMACSS là các đoạn mã nhỏ hơn có thể sử dụng lại trên trang.

article--text 👌 Lý do là đôi khi tên module có hai từ hoặc tiền tố riêng của chúng như big-article

Ngoài ra, bạn có thể lồng các module bên trong các module nếu một module cụ thể chiếm một phần lớn của trang:

<div class="box">
    <div class="box--label">This is box label</div>
    <ul class="box--list list">
        <li class="list--li">Box list element</li>
    </ul>
</div>

Một trong những khái niệm chính ở đây là sử dụng tối đa hai bộ chọn cho mỗi quy tắc CSS, nhưng trong hầu hết các trường hợp chỉ có một bộ chọn có tiền tố.

Bằng cách này, chúng ta có thể tránh trùng lặp các quy tắc và cũng có thêm bộ chọn trên các phần tử con có cùng tên, do đó cải thiện tốc độ.

State: state trong SMACSS là một cách để mô tả các module của chúng ta trông như thế nào trong các tình huống động khác nhau.

Các state được áp dụng cho cùng một phần tử. Như với các kiểu layout, chúng tôi có xu hướng sử dụng các tiền tố ở đây.

Here we use the is prefix, as in is-hidden or is-selected.

Here, !important may be used
.box .element {
    display: none;
}
.is-shown {
    display: block;
}
Nó sẽ vẫn bị ẩn ngay cả sau khi bạn thêm lớp .is-shows vào phần tử thông qua JavaScript. Điều này là do quy tắc đầu tiên có hai cấp độ sâu và sẽ ghi đè lên quy tắc đó.

Theme: Hầu hết đây là những yếu tố lặp lại trên toàn bộ trang web. Chúng tôi không muốn xác định lại chúng mỗi khi chúng tôi tạo chúng.

.button-large {
    width: 60px;
    height: 60px;
}
<button class="button-large">Like</button>

Every SMACSS project structure uses five categories:

Base
Layout
Modules
State
Theme

Base

Trong SMACSS, các kiểu cơ sở xác định phần tử sẽ trông như thế nào ở bất kỳ đâu trên trang. Chúng là các giá trị mặc định. Nếu bạn đang sử dụng biểu định kiểu đặt lại, điều này đảm bảo rằng các kiểu kết quả của bạn giống nhau trên các trình duyệt mặc dù có sự khác biệt giữa các giá trị mặc định CSS cơ sở được mã hóa cứng bên trong của chúng.

Trong kiểu cơ sở, bạn chỉ nên bao gồm bộ chọn phần tử trần hoặc những bộ chọn có lớp giả, nhưng không bao gồm bộ chọn lớp hoặc ID. (Bạn nên có lý do thực sự chính đáng để đặt lớp hoặc ID bên trong nó, có thể chỉ khi bạn đang tạo kiểu cho các phần tử của plugin bên thứ ba và bạn cần ghi đè kiểu mặc định cho phần tử cụ thể đó.)

Dưới đây là một ví dụ về cách một đơn vị tệp cơ sở sẽ trông như thế nào:

html {
    margin: 0;
    font-family: sans-serif;
}

a {
    color: #000;
}

button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

Vì vậy, nó phải bao gồm kích thước mặc định, lề, màu sắc, đường viền và bất kỳ giá trị mặc định nào khác mà bạn định sử dụng trên trang web của mình. Kiểu chữ của bạn và các yếu tố biểu mẫu của bạn phải có phong cách thống nhất xuất hiện trên mọi trang và tạo cảm giác và giao diện rằng chúng là một phần của cùng một thiết kế và chủ đề.

SMACSS hay không, tôi thực sự khuyên bạn nên tránh sử dụng! Important càng nhiều càng tốt, và không sử dụng tổ hợp sâu, nhưng tôi sẽ nói thêm về điều đó sau trong bài đăng này. Ngoài ra, nếu thực hành của bạn là sử dụng CSS đặt lại, thì đây là nơi bạn nên thêm nó vào. (Tôi thích sử dụng Sass hơn, vì vậy tôi chỉ bao gồm nó ở đầu tệp, thay vì phải sao chép nó vào hoặc tham chiếu nó một cách riêng biệt khỏi phần tử của mỗi trang.)

Layout

Kiểu bố cục sẽ chia trang thành các phần chính — chẳng hạn như các phần như điều hướng hoặc có thể là đàn accordion, mà là các phần thực sự cấp cao nhất:

Kiểu bố cục SMACSS dành cho các phần chính như đầu trang, thanh bên, nội dung / chính và chân trang.

Các bố cục này sẽ chứa nhiều mô-đun CSS như hộp, thẻ, danh sách không có thứ tự, phòng trưng bày, và những thứ tương tự, nhưng tôi sẽ nói thêm về các mô-đun trong phần tiếp theo. Hãy xem xét một trang web mẫu để xem những gì chúng ta có thể chia thành các bố cục:

Ở đây chúng ta có "header, main và footer". Các bố cục này có module như links và logo trên header ở trên cùng, boxs và articles trên main, và links và copyright cho footer. Chúng tôi thường cung cấp cho bố cục một bộ chọn ID, vì chúng không lặp lại trên trang và chúng là duy nhất.

Đây là một ví dụ về cách nó sẽ trông như thế nào:

#header {  
    background: #fcfcfc;
}

#header .l-right {
    float: right;
}

#header .l-align-center {
    text-align: center;
}