Tư duy CSS không giống tư duy HTML

Ai cũng học HTML trước CSS.

Nên cách viết CSS của họ có thể bị ảnh hưởng bởi cách viết HTML.

Đó là như thế nào?

Hãy nhìn vào css sau đây và bạn thấy gì?

header nav ul li a {
    color: red;
    text-transform: uppercase;
    font-weight: bold;   
    }

Một cái selector dài lê thê:header nav ul li a, ngoài nguy cơ tiềm ẩn như đã đề cập ở bài trước, nó còn phản ánh cách bạn viết CSS như dựng một file HTML: Đầu tiên là tạo header đầu trang, trong header có nav navigation bar, trong nav có một ul danh sách gồm các li tiểu mục, trong tiểu mục là các a link. Có vẻ rất hệ thống và hợp lý.

Khi viết đến những phần sau của trang web, giả sử bạn lại muốn tô đỏ một cái tựa đề và chỉnh nó thành viết hoa toàn bộ, kèm theo kiểu chữ đậm, tóm lại là giống y như cái link ban nãy

section div h1 {
    color: red;
    text-transform: uppercase;
    font-weight: bold;
  }

Bạn đang viết css theo mô hình lần lượt theo thứ tự element như viết HTML. Element nào có trước viết trước, có sau viết sau. Lần lượt từng thứ một, mỗi thứ một khoảng trời riêng, css riêng.

Đừng.

Cách làm đúng ở đây là ngay từ đầu phải có một cái nhìn tổng quan về những thành phẩn có hình thức giống nhau trong cả trang, rồi định dạng chung bằng class, dù css của class này chỉ có vài dòng..

Cả cái link kia và cái h1 phải có một tên class chung, tên đặt có tính mô tả cao, ví dụ red-bold-uppercase-text, ok hơi dài nhưng giúp ích về sau khi nhìn lại bạn sẽ nhanh chóng hiểu được code của chính mình.

Rồi định dạng một lần cho cái class đó thôi

.red-bold-uppercase-text{
    color:red;
    text-transform: uppercase;
    font-weight: bold;
    }

Nếu bạn có triệu chứng này, bạn đã mắc vào thói quen ở mục 1. Cách giải quyết như mục 1.

Giả sử bạn có một đoạn văn với lời lẽ hùng hồn, bạn muốn nó nổi bật. Sẵn cái class ban nãy red-bold-uppercase-text, bạn nhanh trí thêm class này vào đoạn văn đó.

Nhưng mà bạn chỉ cần đỏ và đậm thôi, không cần viết hoa. Như một lẽ đương nhiên bạn sẽ xóa sổ kiểu viết hoa

.doanvanhunghon {
    font-weight: normal;
 }

Nó có tác dụng và tương đối dễ làm ở ví dụ nhỏ này. Nhưng nếu bạn dùng thêm vài lần như thế, và cần nhiều dòng css chứ không đơn giản một dòng, khi đó code vừa dài vừa khó bảo trì chỉnh sửa sau này.

Giải pháp ở đây là tách css trong class ra thành nhiều class để sử dụng cho linh hoạt. Một class chỉ để tô đỏ và đậm:

.red-bold-text{
    color:red;
    font-weight:bold;
}

và một class chỉ để viết hoa:

.uppercase{
    text-transform: uppercase;
    {

Như vậy thay vì dùng css để xóa style, bạn chỉ dùng css để thêm style

Các từ khóa hữu ích:

• object-oriented css
• BEM: block, element, modifier