[Dịch] Kiến trúc CSS: những bước đầu tiên

I translated this article from CSS Architecture, special thanks to Thiago Victorino-the author of this article, and sorry, i can’t find your email to request translation!

CSS là một ngôn ngữ được thiết kế đơn giản. Mục đích cơ bản là để định nghĩa các element cho HTML và các thuộc tính của chúng. Dễ hiểu, dễ sử dụng. Khi làm việc với các project lớn và phức tạp, nó sẽ không còn đơn giản như chúng ta vẫn nghĩ nữa.

Khả năng ghi đè thuộc tính theo thứ tự trong file style, element có thể thừa kế thuộc tính của element cha trong DOM. Nếu ko có sự sắp xếp thích hợp, các style trở nên khó xử lí và lộn xộn. Đó là lý do phải có kiến trúc CSS.

Kiến trúc CSS là gì?

Kiến trúc CSS làm cho việc viết CSS chặt chẽ hơn. Giống như là một bộ guideline và các thói quen tốt nhất giúp dev viết code linh hoạt, dễ bảo trì, dễ mở rộng và có thể sử dụng lại. Chúng ta đạt được điều đó bằng cách sử dụng cách tiếp cận hướng module, đề cao tính tổ chức và đặt tên có ý nghĩa trong code.

Chúng ta sẽ làm được những điều đó trong 3 nốt nhạc (3 bước) !

Modul hóa là khái niệm trung tâm. Không chỉ trong code, mà còn trong design. Sản phẩm kỹ thuật số đã tiến hóa rất nhiều trong những năm qua, do sự tăng trưởng của các thiết bị mới và web responsive. Độ phức tạp đã thay đổi. Chúng ta, dev và designer, cần phải thích nghi với tình hình mới. Thiết kế các trang không còn là phương pháp tiếp cận tốt nhất nữa, chúng ta nên xây dựng design system. CSS dự trên các trang sẽ không thích hợp với nhu cầu xây dựng các sản phẩm linh hoạt và có thế mở rộng. Làm việc với các thành phần có thể sử dụng lại chính là giải pháp.

Trong kiến trúc CSS, modul hóa có thể áp dụng trên một vài cấp độ. 3 bước cơ bản để bắt đầu tái kiến trúc CSS là:

  • chia code thành các đoạn nhỏ và tách biệt chúng bởi các scope
  • code các thành phần theo kiểu độc lập và tách biệt (đóng gói chúng).
  • đặt tên selector CSS theo mục đích của chúng và mối liên hệ với các thành phần khác.

Khởi động

1. Phân loại code

Để giữ kiến trúc module, chia nhỏ code là việc qua trọng. Nhiều file làm cho code dễ đọc, dễ kiểm soát. Để làm việc đó, hãy dùng CSS preprocessor — SASS, SCSS, LESS,... Preprocessor tăng tốc độ viết CSS, với nhiều tính năng mới như mixin, biến, … Để làm việc với các file riêng biệt, code của bạn phải chia thành các thành phần và import vào file main.scss, nó sẽ dịch toàn bộ vào một file .css.

phân loại css trong SCSS

Giờ là lúc để phân loại mỗi block code theo scope trong project. Một trong những phương pháp phân mục code là SMACSS. Các cấp độ được SMACSS khuyên dùng là base, layout, module, state, theme. ITCSS mở rộng concept này, và đem tới một cách khác, chằng hạn như setting và trumps. MVCSS có cách tiếp cận tương tự, với cách đặt tên khác.

các lớp đối tượng

Bạn không cần phải tuân thủ nghiêm ngặt những phương pháp đó. Học qua các ví dụ và xét xem điều gì hợp với project của bạn. Theo ý của tôi, chia nhỏ project thành settings, base, layout, và components là một cách bắt đầu tốt. Setting là file thiết lập project, chằng hạn như biến (màu sắc, kích thước, typo, …) và phần khác (hàm, mixin…). Base sẽ chứa resetcss va các rule ko phải class (ví du như thẻ a, hay input,…). Layout chứa các class cấu trúc, phục vụ cho việc layout page, ví dụ như grid và container. Cuối cùng, components, lõi của kiến trúc CSS và design systems.

2. Định nghĩa component

Tôi coi component là lõi của một kiến trúc CSS, bởi vì ở đấy sẽ chứa nhiều code nhất. Chúng có thể được sử dụng lại, vd như button, accordions hay modal

component button

Mỗi component nên được đóng gói vào 1 file riêng. Để thống nhất, nên đặt tên file giống với tên class.

Một vài compenent không đơn giản như button, chúng phức tạp hơn, ở bên trong các element. Lấy ví dụ một post trong blog. Nó có thumbnail, title, excerpt, và link.

một blog post

Đôi khi, khi định nghĩa component, bạn sẽ tự hỏi mình cái gì nên là một component hay là một phần của khổi lớn hơn. Để trả lời câu hỏi đó, tìm những thứ lặp lại trên sản phẩm hoặc website của bạn. Nếu nó được sử dụng ở nhiều ngữ cảnh khác nhau, thì đó là một component riêng biệt. Trong post ở phía trên, .link là một component tiêng biệt, bởi vì nó được sử dụng ở nhiều phần trong website. Các element còn lại chỉ dùng trong post. Hãy xem làm thế nào để kiểm soát quan hệ giữa các tên selector.

3. Áp dụng quy tắc đặt tên

Nhớ rằng: chúng ta muốn kiến trúc truyền tải được ý nghĩa và đề cao tính tổ chức. Sử dụng quy tắc đặt tên class trong component sẽ giúp chúng ta đạt được điều đó. Một quy tắc như BEM sẽ làm rõ mục đích và mối quan hệ giữa component và các element của nó, giúp cho dễ đoán được sự khác biệt với các thành phần khác. Ý tưởng của BEM là tuân theo cấu trúc sau:

  • Block: component
  • Element: thành phần bên trong của component
  • Modifiers: biến thể của block hay element

Ví dụ trong post:

Block:

.blog-post { … }

Element:

.blog-post__excerpt { … }

Modifier:

.blog-post — small { … }

Một biến thể của blog post — nhỏ hơn. Để chỉ rõ mối liên hệ giữa Modifier và Block, BEM dùng 2 dấu gạch.

section.container div.grid div p { … }

Về mặt tổ chức, cách tiếp cận này đề cao tính thống nhất và khả năng dự đoán trong lớp component. Ở mức độ kỹ thuật, điều này giúp giảm selector, tăng hiệu lực của selector và tách riêng CSS khỏi kiến trúc DOM (vì thế đề cao tính có thể sử dụng lại). Ví dụ:

section.container div.grid div p { … }

Trong trường họp này, trình duyệt cần phải kiển tra tất cả các điều kiện để sử dụng selector:

Có phải có một thẻ <p> bên trong một thẻ <div> bên trong một thẻ <div> khác có class .grid bên trong thẻ <section> with có class .container? Nếu thể, style sẽ là …

Phức tạp nhỉ? Và dev sẽ phải tự hỏi: Selector này có ảnh hưởng gì trong một scope/trường hơp lớn hơn? Nó có quan hệ gì với các selector khác?”

Class của BEM chính xác và có ý nghĩa. Trình duyệt chỉ phải kiểm tra class .blog-post-excerpt ở cây DOM, tăng hiệu quả. Nó có thể sử dụng lại, vì ko bị gắn chặt vào cấu trúc DOM. Và dev có thể xem như nó là một phần của component .blog-post.

Tóm tắt

Những gợi ý trên chỉ là bước đầu, một nền cơ bản và bước đầu tiên để cấu trúc CSS. Để đọc thêm về đề tài này, tôi khuyên bạn nên truy cập danh sách này mà tôi đã biên soạn với một vài suy nghĩ tuyệt vời và phương pháp từ các nhà phát triển tuyệt vời lấy cảm hứng từ bài viết này. Có rất nhiều cách tiếp cận khác nhau trên internet (rất nhiều, thật luôn !)

I translated this article from CSS Architecture, special thanks to Thiago Victorino-the author of this article, and sorry, i can’t find your email to request translation!
Show your support

Clapping shows how much you appreciated Trịnh Minh Tâm’s story.