Hướng dẫn css class name convention - quy ước tên lớp css
Show Đã đăng vào thg 4 30, 2020 5:17 CH 3 phút đọc 3 phút đọc Giới thiệuBootstrap thường được biết đến nhiều như một css framework với khả năng hỗ trợ responsive design cực mạnh. Nhưng có một yếu tố khiến nó được yêu thích, mà đôi khi người sử dụng còn không nhận ra, đó là hệ thống đặt tên class cực kì chặt chẽ, dễ nhớ và mang tính biểu đạt cao. Nói vậy không có nghĩa đó là điểm khác biệt của Bootstrap, đa phần các css framework phổ biến khác như Bulma, Materializecss,... đều có cách đặt tương tự tên như vậy. (Nhưng bọn nó ra đời sau Bootstrap) Nhờ việc đặt tên khoa học, Bootstrap tạo ra rất nhiều thành phần tái sử dụng mà không bị xung đột, giúp cho việc phát triển ứng dụng trở nên siêu tốc. Hệ thống class của Bootstrap được chia làm 4 phần: layout, content, components, utilities. Chúng được xây dựng dựa trên tư tưởng của OOCSS (Object oriented CSS - một phương pháp viết css hướng đối tượng). Chi tiếtOOCSS mang 2 nguyên tắc chính:
Với nguyên tắc thứ nhất, các thuộc tính CSS tạo cấu trúc sẽ được đặt trong class mô tả chức năng của thành phần/đối tượng đó (Cái này là cái gì?), ví dụ như nút bấm (button), biểu mẫu (form), thông báo (alert),... Trong khi đó, phần giao diện sẽ được đảm nhận bởi các class khác nhau, để giúp đối tượng thay đổi màu sắc, font chữ, kích cỡ (những cái nhìn thấy được).
Nguyên tắc thứ 2 của OOCSS là chia tách container và content.
Với việc sử dụng các class như trên (thay vì chỉ sử dụng thẻ), chúng ta thấy rõ sự liên hệ giữa các thành phần. Trong đó, ".page-item" là content của ".pagination", đồng thời cũng là container của ".page-link". Khi đó, thay vì style nhiều cấp với CSS, chúng ta có thể viết đơn giản hơn, vì các thành phần là độc lập.
Tổng kếtNói chung, Bootstrap ra đời sớm và đã trở nên phổ biến trong gần chục năm qua, nó không thể bị thay thế trong một sớm một chiều được. Mọi người tiếp cận với Bootstrap nhiều hơn các CSS framework khác, cái bài viết, câu hỏi về nó cũng nhan nhản. Có thể vì vậy chúng ta cảm thấy quen thuộc với nó ngay cả trước khi bắt đầu học. Dù sao hình thành một tư duy Bootstrap sẽ rất hữu dụng ngay cả khi bạn sử dụng CSS thuần hay bất cứ một công nghệ nào khác. All rights reserved |