Rate this post

Trong HTML, thuộc tính class cho phép bạn đặt một hoặc nhiều tên cho một phần tử HTML. Tên này có thể được sử dụng bởi CSS để tùy biến giao diện cho phần tử đó hoặc bởi javascript để thao tác với phần tử đó.

Các bài viết liên quan;

Ví dụ:

<p class="intro">This is an introduction.</p>

Trong ví dụ trên, thẻ <p> được đánh dấu với tên là “intro”. Tên này có thể được sử dụng bởi CSS để tùy biến giao diện cho phần tử <p> có tên “intro”.

Bạn có thể đặt nhiều tên cho một phần tử bằng cách sử dụng dấu phẩy để phân tách giữa các tên.

<p class="intro, important">This is an important introduction.</p>

Trong ví dụ này phần tử <p> có hai tên là “intro” và “important” và các tên này có thể sử dụng cho mục đích tùy biến giao diện hoặc thao tác với javascript.

Cần lưu ý rằng, các tên class phải được đặt theo quy tắc đặt tên hợp lệ và không được trùng với tên của các thuộc tính HTML khác.

Quy tắc đặt tên class trong html

Trong HTML, có một số quy tắc chung khi đặt tên cho thuộc tính class:

  1. Tên class phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới, và không được bắt đầu bằng số hoặc ký tự đặc biệt.
  2. Tên class không được chứa khoảng trắng hoặc ký tự đặc biệt, chỉ được chứa chữ cái, số và dấu gạch dưới.
  3. Tên class không được trùng với tên bất kỳ thuộc tính HTML khác.
  4. Tên class có thể có độ dài bất kỳ, tuy nhiên tên ngắn và dễ hiểu sẽ dễ quản lý và dễ dàng tìm kiếm.
  5. Tên class có thể sử dụng lại cho nhiều phần tử khác nhau trong trang web.
  6. Tên class có thể sử dụng theo đúng chuẩn BEM (Block, Element, Modifier) hoặc SMACSS (Scalable and Modular Architecture for CSS) để tạo ra một cấu trúc giao diện dễ quản lý và dễ bảo trì.

Cần chú ý rằng, các quy tắc này chỉ là điều lệ và không bắt buộc phải tuân thủ, tuy nhiên tuân thủ nó sẽ giúp cho việc quản lý và bảo trì trang web dễ dàng hơn.

Chuẩn BEM (Block, Element, Modifier) class trong html

Chuẩn BEM (Block, Element, Modifier) là một kỹ thuật đặt tên class trong HTML và CSS để tạo ra một cấu trúc giao diện dễ quản lý và dễ bảo trì. BEM có 3 thành phần chính:

  1. Block (Khối) là một phần tử HTML độc lập, có thể tồn tại độc lập hoặc trong một context khác. Ví dụ: header, footer, menu, form
  2. Element (Phần tử) là một phần tử con của Block, chỉ tồn tại trong context của Block. Ví dụ: header__title, footer__copyright, menu__item
  3. Modifier (Bổ trợ) là một thuộc tính hoặc trạng thái của Block hoặc Element. Ví dụ: header--light, footer__copyright--align-right, menu__item--active.

Cách sử dụng BEM:

  • Tên class Block bắt đầu bằng chữ cái hoặc dấu gạch dưới.
  • Tên class Element bắt đầu
  • Tên class Element bắt đầu bằng tên của Block và kết thúc với hai dấu gạch dưới, sau đó là tên của Element. Ví dụ: header__title, footer__copyright.
  • Tên class Modifier bắt đầu bằng tên của Block hoặc Element và kết thúc với hai dấu gạch ngang, sau đó là tên của Modifier. Ví dụ: header--light, footer__copyright--align-right.

Sử dụng BEM sẽ giúp cho việc quản lý và bảo trì trang web trở nên dễ dàng hơn, giúp tăng tính dễ hiểu và dễ đọc cho code, giảm xung đột trong css.

Chuẩn Scalable and Modular Architecture for CSS

Scalable and Modular Architecture for CSS (SMACSS) là một kỹ thuật đặt tên class trong HTML và CSS để tạo ra một cấu trúc giao diện dễ quản lý và dễ bảo trì. SMACSS không có quy tắc cụ thể như BEM, nó chủ yếu là một tập hợp các quy tắc và best practices để tạo ra một cấu trúc giao diện có thể mở rộng và dễ quản lý.

SMACSS chia các class CSS thành 5 loại chính:

  1. Base: Là các class cơ bản dùng để khởi tạo các thuộc tính mặc định cho các phần tử HTML, như font -size, color, margin, padding.
  2. Layout: Là các class dùng để xác định cấu trúc giao diện của trang web, như header, footer, sidebar, main content.
  3. Module: Là các class dùng để xác định các thành phần chức năng trong trang web, như menu, button, form, table.
  4. State: Là các class dùng để xác định trạng thái của các phần tử, như hover, active, disabled.
  5. Theme: Là các class dùng để xác định giao diện của trang web, như dark mode, light mode.

Sử dụng SMACSS sẽ giúp cho việc quản lý và bảo trì trang web trở nên dễ dàng hơn, giúp tăng tính dễ hiểu và dễ đọc cho code, giảm xung đột trong css, giúp tạo ra một cấu trúc giao diện dễ mở rộng và dễ quản lý hơn.

ví dụ về đặt tên class trong html

Ví dụ:

<header class="layout-header">
    <nav class="module-nav">
        <a class="module-nav__item" href="#">Home</a>
        <a class="module-nav__item" href="#">About</a>
        <a class="module-nav__item" href="#">Contact</a>
    </nav>
    <h1 class="module-header__title">Welcome to my website</h1>
</header>
<main class="layout-main">
    <section class="module-section">
        <h2 class="module-section__title">About Us</h2>
        <p class="module-section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>
    </section>
</main>
<footer class="layout-footer">
    <p class="module-footer__copyright">Copyright © 2023 My Website</p>
</footer>

Trong ví dụ trên, tôi đã sử dụng chuẩn BEM để đặt tên cho các class. Tôi đã chia các class thành 3 loại: layout (header, main, footer), module (nav, header__title, section, footer__copyright) và state (module-nav__item–active)

Trong đó, layout-header, layout-main, layout-footer là các class dùng để xác định cấu trúc giao diện của trang web, module-nav, module-header__title, module-section, module-footer__copyright là các class dùng để xác định các thành phần chức năng trong trang web, module-nav__item–active là các class dùng để xác định trạng thái của các phần tử.

Với cách đặt tên class này, tôi có thể dễ dàng quản lý và bảo trì trang web, tăng tính dễ hiểu và dễ đọc cho code, giảm xung đột trong css, giúp tạo ra một cấu trúc giao diện dễ mở rộng và dễ quản lý hơn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now