Thiết lập CSS theo SMACSS

Đây là bài dịch, bài gốc các bạn có thể xem ở đây : SMACSSによるCSS設計

Ở dự án trước đây, sau khi áp dụng phương pháp BEM, tên class trong các file CSS của tôi trở nên quá dài, nhìn phát chán, tôi đã tìm thấy bài viết về phương pháp SMACSS của CodeGrid, và tôi thấy nó khá ổn. Dưới đây là những điều tôi tổng hợp lại từ phương pháp của CodeGrid. Với những người chưa đọc cuốn sách này, tôi khuyến cáo các bạn nên đọc một cách kỹ càng ít nhất một lần, có thể qua link sau:

Thiết lập CSS từ SMACSS - Base và Layout

Chúng ta sẽ chia CSS thành 5 loại và đặt tên chúng như sau :

1. Base
2. Layout
3. Module
4. Trạng thái (State)
5. Theme

1. Base Rule

Là các style mặc định, định nghĩa các thành phần của một trang web

body
a:link
table ...

Với loại này, chỉ có 1 pattern đã được tạo và định nghĩa sẵn, chúng ta sẽ không đưa vào bất cứ design nào vào các thành phần này. Ngoài ra, chúng ta cũng tránh sử dụng CSS Reset, thay vào đó có thể dùng Normalize.css

2. Layout Rule

Chia page thành các khu vực khác nhau

.l-main
.l-sub

Chúng ta dùng tiền tố l- để đánh dấu các CSS loại này. Và bằng cách này các design thuộc loại này sẽ rất dễ dàng nhận biết (nhìn vào tiền tố l-) Ở đây ngoài class chúng ta có thể sử dụng id, nhưng vì id không thể gán được nhiều giá trị, nên khi muốn override style thì sẽ hết sức khó khăn, do đó chúng ta sẽ chỉ dùng class.

Các CSS loại này sẽ được dùng để xác định vị trí và bố cục (Font hoặc màu sắc sẽ được sử dụng trong loại Module hoặc State)

Dùng Descendant Selector để phân nhánh CSS

.l-main {
  awidth: 70%;
}
.l-fixed .l-main {
  awidth: 600px;
}

Khi l-main bao bởi .l-fixed chiều dài sẽ thành dạnh px (600), còn nếu ko thì sẽ ở dạng %.

3. Module Rule

Dùng cho các thành phần có thể tái sử dụng như là

logo
navigation
tab

Là thành phần sẽ đặt vào trong Layout, cần giữ cho chúng độc lập để có thể tái sử dụng ở bất cứ đâu.

Ví dụ sử dụng layout và Module

<div class="l-container-12">
  <div class="l-grid-06">
    <div class="box">box1</div>
  </div>
  <div class="l-grid-06">
    <div class="box">box2</div>
  </div>
</div>

• Layout .l-grid-01~n dùng để mô tả các class có chiều rộng khác nhau, từ đó có thể điều chỉnh layout một cách vô hạn
• Module .box là thành phần dùng chung

Rule khi đặt tên Module

Tên của các module con sẽ được gắn tiền tố là tên của module cha

<div class="item">
  <p class="item-text"></p>
</div>

Thời điểm tạo class name

Chúng ta không cần thiết phải gắn class cho toàn bộ các thành phần của module:

• Không gán class name cho các thẻ như li, a,...
• Gắn class name cho các thẻ div, span

Khi thẻ như là li có nhiều tầng, lớp, sử dụng > để xác định. Nếu thay đổi tiêu đề thì đổi từ h2 -> h3. Và vì cây cấu trúc của module có thể thay đổi, do đó nếu được thì chúng ta nên bọc chúng trong một div đã được gán class thì tốt hơn.

Không tạo ra các style khác nhau của cùng một element tuỳ theo thành phần cha

Với cùng một element, có thể đặt ở nhiều chỗ khác nhau, nhưng tuyệt đối không set các style khác nhau của element đó mà phụ thuộc vào thành phần cha (thành phần chứa nó)

VD như nếu 2 div search hiển thị khác nhau ở 2 div l-main và l-sub, thì chúng ta sẽ không set như thế này:

<div class="l-main">
  <div class="search">~</div>
</div>

<div class="l-sub">
  <div class="search">~</div>
</div>

mà sẽ set như thế này:

<div class="l-main">
  <div class="search">~</div>
</div>

<div class="l-sub">
  <div class="search search-vertical">~</div>
</div>

Với việc tạo ra style .search-vertical, thì khi element search muốn hiển thị ở bất kỳ đâu với style giống như .search-vertical, chúng ta đều có thể làm được bằng cách thêm class .search-vertical.

4. State (Trạng thái) Rule

Dùng thể hiện trạng thái của element, do đó thường sẽ viết style để override các style hiện tại của element. Việc chuyển trạng thái là thông qua Javascript

• Nếu kết quả trạng thái là true thì dùng tiền tố is-
• Hiển thị/không hiển thị
  • .is-hidden {}
  • .is-error {}
  • .is-active {}

Ví dụ : .is-dialog-hidden, .is-tab-active

!important được khuyến khích sử dụng trong trường hợp này. Các style mô tả trạng thái này cũng được khuyến khích đính kèm tên của module cụ thể.

5. Theme Rule

CSS dùng cho việc quản lý theme

/* main.css */
.box {
  border: 1px solid;
}

/* theme.css */
.box {
  background-color: #eee;
  border-color: #ccc;
}

Ở đây, style liên quan đến màu sắc đã được move và quản lý ở theme

Sử dụng tiền tố theme-

/* theme.css */
.theme-border {
  border-color: #ccc;
}
.theme-background {
  background-color: #eee;
}

Mục tiêu của SMACSS

• Nâng cao giá trị ngữ nghĩa giữa HTML và Content
• Giảm sự phụ thuộc vào cấu trúc HTML cụ thể