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?

1. Viết CSS tuần tự theo thứ tự element

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 headernav 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. :laughing:

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;
    }

2. Viết đi viết lại những style giống nhau

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.

3. Viết CSS để xóa style

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
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Mòe

11 bài viết.
101 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
39 28
google cách học tốt tiếng anh thì ra hàng đống kết quả nhưng đảm bảo không có cái nào dùng được (nếu dùng được thì bạn đã tiến bộ rồi phải không). ...
Mòe viết 20 ngày trước
39 28
White
31 26
Bài này không nhằm chê freecodecamp, thậm chí còn khen nhé :v Trong bài có sử dụng sự trợ giúp của các bạn Hồ Xuân Diễn, Robin Huy, Anh Nguyễn, Da...
Mòe viết 28 ngày trước
31 26
White
30 12
Trước đây việc dàn bố cục trang (layout) chủ yếu dựa vào những công cụ thô sơ thời đồ đá, ví dụ để cho 2 đoạn văn ở 2 bên của trang thì người ta sẽ...
Mòe viết 23 ngày trước
30 12
Bài viết liên quan
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết 1 tháng trước
0 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
11 bài viết.
101 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!