Học viện lập trình Hachinet Academy

Bứt phá Công nghệ

Viết CSS như thế nào để Clean-code? 5 Kỹ thuật để viết CSS luôn sạch sẽ, dễ bảo trì và sử dụng lại


Ngày nay, HTML, CSS và JavaScript làm ngôn ngữ triển khai chính của các ứng dụng Web tương tác và các loại ứng dụng khác. Bên cạnh mã JavaScript đã được modul hóa qua TypeScript hay ES để lập trình viên dễ sử dụng và bảo trì thì HTML và CSS trong các ứng dụng vẫn đang được viết kiểu tự do.

Viết CSS như thế nào để Clean-code? 5 Kỹ thuật để viết CSS luôn sạch sẽ, dễ bảo trì và sử dụng lại

Mã HTML trong các ứng dụng như vậy có thể chứa đầy các thẻ không có ngữ nghĩa và rất nhiều lớp và các lớp CSS tùy chỉnh tương ứng của nó chỉ là một tập hợp các bộ quy tắc được đặt tên ngẫu nhiên ghi đè lên nhau, ngụ ý khả năng tái sử dụng gần như bằng không. Mã như vậy kết hợp với các lệnh khác nhau của các framework JavaScript MVC như Angular, React hoặc Vue rất khó đọc, duy trì và gỡ lỗi. 

1. Sử dụng Bộ tiền xử lý CSS:

Các bộ tiền xử lý CSS sẽ cho phép các bảng định kiểu của sẽ có cú pháp đơn giản hơn, tự động hóa một số khía cạnh của việc tạo mã và dễ tùy chỉnh hơn. Có bốn bộ tiền xử lý chính - Sass, PostCSSLessvà Stylus, mỗi bộ đều sở hữu các chức năng thú vị và tuyệt vời.

2. Modularize Code:

Khi bạn chia CSS của mình thành các mô-đunđược đặt tên hợp lý (tức là các tệp CSS riêng biệt) theo cấu trúc của trang, nó sẽ giúp dễ dàng xác định vị trí mã trong trường hợp gỡ lỗi hoặc thay đổi, ngoài ra có thể sử dụng lại mã từ mô-đun trong một dự án tiếp theo và khả năng tự động tiền tố các lớp để tránh xung đột đặt tên lớp. Các framework front-end chẳng hạn như Angular và Vue có hỗ trợ CSS mô-đun ngoài với các tính năng Local Styles và Scoped CSS.

3. Sử dụng phương pháp BEM:

BEM là cách viết tắt của Block - Element - Modifier . Đây là một phương pháp về cách đặt tên cho các lớp CSS của bạn một cách dễ đoán. Ứng dụng của nó cho dự án của bạn khá đơn giản:

- Block: là một phần độc lập, có thể sử dụng lại trên trang,

- Element là một phần phụ của một Block hoặc một Element khác (~ một Block con),

- Modifier cho phép các Block và Element thay đổi một chút diện mạo hoặc hành vi của chúng

Khi đặt tên cho các lớp, tên của các lớp tuân theo tập hợp các quy ước đặt tên sau:

.block cho Các Block dưới dạng đơn vị mã có thể sử dụng lại,

.block__element (phân tách các phần bằng dấu gạch dưới kép ) cho Element - các phần riêng lẻ của Block không được sử dụng bên ngoài Khối của chúng,

.block__element—modifier (phân tách các phần bằng dấu gạch ngang kép ) cho các Bổ ngữ, biểu thị trạng thái cụ thể của các Element.