Bạn không bị giới hạn ở một lớp CSS duy nhất cho mỗi phần tử.
Cascading Style Sheets (CSS) cho phép bạn xác định sự xuất hiện của một phần tử bằng cách gắn vào các thuộc tính mà bạn áp dụng cho phần tử đó. Các thuộc tính này có thể là hoặc ID hoặc một lớp và, giống như tất cả các thuộc tính, chúng thêm thông tin hữu ích vào các phần tử mà chúng được đính kèm. Tùy thuộc vào thuộc tính bạn thêm vào phần tử, bạn có thể viết bộ chọn CSS để áp dụng các kiểu trực quan cần thiết cần thiết để đạt được giao diện cho phần tử đó và toàn bộ trang web.
Trong khi các ID hoặc các lớp làm việc với mục đích hooking vào chúng với các quy tắc CSS, các phương thức thiết kế web hiện đại ưu tiên các lớp trên các ID, một phần, vì chúng ít cụ thể và dễ làm việc hơn với tổng thể. Có, bạn vẫn sẽ tìm thấy nhiều trang web sử dụng ID, nhưng những thuộc tính đó đang được áp dụng ít hơn so với trước đây trong khi các lớp học đã thực hiện trên các trang web hiện đại.
Một hoặc nhiều lớp trong CSS?
Trong hầu hết các trường hợp, bạn sẽ gán một thuộc tính lớp duy nhất cho một phần tử, nhưng bạn thực sự không bị giới hạn chỉ một lớp theo cách của chúng với ID. Trong khi một phần tử chỉ có thể có một thuộc tính ID duy nhất, bạn hoàn toàn có thể cung cấp cho một phần tử nhiều lớp và, trong một số trường hợp, làm như vậy sẽ làm cho trang của bạn dễ dàng hơn để tạo kiểu và linh hoạt hơn nhiều!
Nếu bạn cần gán nhiều lớp cho một phần tử, bạn có thể thêm các lớp bổ sung và chỉ đơn giản là tách chúng với một khoảng trống trong thuộc tính của bạn.
Ví dụ, đoạn này có ba lớp:
pullquote feature left "> Đây sẽ là văn bản của đoạn
Điều này đặt ba lớp sau trên thẻ đoạn:
- Pullquote
- Đặc sắc
- Trái
Chú ý các khoảng trống giữa mỗi một trong các giá trị của lớp này. Những khoảng trống đó là những gì đặt chúng thành các lớp riêng biệt khác nhau. Đây cũng là lý do tại sao tên lớp không thể có khoảng trống trong chúng, bởi vì làm như vậy sẽ đặt chúng thành các lớp riêng biệt.
Ví dụ: nếu bạn sử dụng "pullquote-featured-left" không có khoảng trống, nó sẽ là một giá trị lớp, nhưng ví dụ ở trên, trong đó ba từ này được phân tách bằng dấu cách, đặt chúng làm giá trị riêng lẻ. Điều quan trọng là hiểu khái niệm này khi bạn quyết định sử dụng giá trị lớp nào trên các trang web của mình.
Khi bạn có các giá trị lớp trong HTML, bạn có thể gán chúng dưới dạng các lớp trong CSS của bạn và áp dụng các kiểu bạn muốn thêm vào. Ví dụ.
.pullquote {...}
.đặc sắc { ... }
p.left {...}
Trong các ví dụ này, các cặp khai báo và giá trị CSS sẽ nằm bên trong các dấu ngoặc nhọn, đó là cách các kiểu dáng đó sẽ được áp dụng cho bộ chọn thích hợp.
Lưu ý - nếu bạn đặt một lớp thành một phần tử cụ thể (ví dụ, p.left), bạn vẫn có thể sử dụng nó như một phần của danh sách các lớp; tuy nhiên, hãy lưu ý rằng nó sẽ chỉ ảnh hưởng đến những yếu tố được chỉ định trong CSS. Nói cách khác, phong cách p.left sẽ chỉ áp dụng cho các đoạn với lớp này vì bộ chọn của bạn thực sự đang nói để áp dụng nó cho "các đoạn có giá trị lớp 'trái'. Ngược lại, hai bộ chọn khác trong ví dụ không chỉ định một phần tử nào đó, do đó chúng sẽ áp dụng cho bất kỳ phần tử nào sử dụng các giá trị lớp đó.
Ưu điểm của nhiều lớp
Nhiều lớp có thể giúp thêm các hiệu ứng đặc biệt vào các phần tử dễ dàng hơn mà không phải tạo một kiểu hoàn toàn mới cho phần tử đó.
Ví dụ, bạn có thể muốn có khả năng nổi các phần tử sang trái hoặc phải nhanh chóng. Bạn có thể viết hai lớp bên trái và bên phải chỉ với float: left; và phao: đúng; trong chúng. Sau đó, bất cứ khi nào bạn có một phần tử bạn cần phải trôi nổi bên trái, bạn chỉ cần thêm lớp "left" vào danh sách lớp của nó.
Tuy nhiên, có một đường tốt để đi bộ ở đây. Hãy nhớ rằng các tiêu chuẩn web quyết định sự tách biệt về phong cách và cấu trúc. Cấu trúc được xử lý thông qua HTML trong khi phong cách là trong CSS.
Nếu tài liệu HTML của bạn chứa đầy các phần tử mà tất cả đều có tên lớp như "đỏ" hoặc "trái", là tên chỉ ra cách các phần tử trông như thế nào hơn là chúng là gì, bạn đang băng qua đường đó giữa cấu trúc và kiểu. Tôi cố gắng giới hạn tên lớp không ngữ nghĩa của mình càng nhiều càng tốt vì lý do này.
Nhiều lớp học, ngữ nghĩa và JavaScript
Một ưu điểm khác khi sử dụng nhiều lớp là nó mang lại cho bạn nhiều khả năng tương tác hơn.
Bạn có thể áp dụng các lớp mới cho các phần tử hiện có bằng cách sử dụng JavaScript mà không loại bỏ bất kỳ lớp nào ban đầu. Bạn cũng có thể sử dụng các lớp để định nghĩa ngữ nghĩa của một phần tử . Điều này có nghĩa là bạn có thể thêm vào các lớp bổ sung để xác định yếu tố đó có nghĩa là ngữ nghĩa. Đây là cách hoạt động của Microformats.
Nhược điểm của nhiều lớp
Điểm bất lợi lớn nhất khi sử dụng nhiều lớp trên các phần tử của bạn là nó có thể khiến chúng khó sử dụng một chút để xem xét và quản lý theo thời gian. Nó có thể trở nên khó khăn để xác định những gì phong cách đang ảnh hưởng đến một yếu tố và nếu bất kỳ kịch bản đang ảnh hưởng đến nó. Nhiều khung công tác hiện có, như Bootstrap, sử dụng nhiều phần tử với nhiều lớp. Mã đó có thể thoát ra khỏi bàn tay và khó làm việc rất nhanh nếu bạn không cẩn thận.
Khi bạn sử dụng nhiều lớp, bạn cũng có nguy cơ có kiểu cho một lớp ghi đè kiểu của một lớp khác ngay cả khi bạn không có ý định cho việc này. Điều này sau đó có thể làm cho nó khó khăn để tìm ra lý do tại sao phong cách của bạn không được áp dụng ngay cả khi nó xuất hiện mà họ nên.
Bạn cần phải nhận thức được tính đặc hiệu, ngay cả với các thuộc tính được áp dụng cho một phần tử đó!
Bằng cách sử dụng công cụ như công cụ Quản trị trang web trong Chrome, bạn có thể dễ dàng thấy các lớp học của bạn đang ảnh hưởng đến kiểu của bạn như thế nào và tránh vấn đề này về các kiểu và thuộc tính xung đột.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 8/7/17