BEM trong HTML CSS: Hướng dẫn đặt tên class một cách chuẩn mực và dễ hiểu

Đặt tên class là kỹ năng quan trọng trong lập trình giao diện web. Trong bài viết này, chúng tôi sẽ giới thiệu quy tắc đặt tên BEM và hướng dẫn bạn cách sử dụng nó để đặt tên class một cách chuẩn mực và dễ hiểu trong HTML CSS.

BEM Css là gì? Giải thích chi tiết.

BEM (Block, Element, Modifier) là một quy tắt đặt đên phổ biến cho việc viết code Html và Css. Khi tạo tên class sử dụng BEM, được sử dụng theo cấu trúc:

.block-name__element-name--modifier-name

Dưới đây là phân tích chi tiết ý nghĩa của từng phần:

• block-name: Đây là tên của khối chính hoặc một component(thành phần). Nó cho phép bạn mô tả đến đối tượng đang được đề cập tới. Ví dụ về tên block có thể “header”, “menu”, “button”, “cart”, “post”, “product”…
• element-name: Đây là một phần của một khối cụ thể. Nó được phân tách khỏi tên khối bằng hai dấu gạch dưới (__). Ví dụ tên của các element có thể là title, content, price, link…
• modifier-name: Đây là một phần tùy chọn, có thể có hoặc không, dùng để mô tả các biến thể của block hoặc element. Nó được phân tách khỏi khối hoặc element bơi hai dấu gạch ngang (–). Ví dụ về modidier tên có thể như “small”, “big”, “primary”, “success”…

Đây là một ví dụ về tên class sử dụng công thức BEM:

<button class="button button--primary">Click me!</button>

Trong ví dụ này, tên block là “button”, tên modifier là “primary” và không có tên element vì nút là một thành phần độc lập.

Dùng BEM xây dựng form đăng nhập

Đây là ví dụ về cách sử dụng BEM cho form login:

<form class="form form--login">
  <div class="form__field">
    <label class="form__label" for="username">Username</label>
    <input class="form__input form__input--username" type="text" name="username" id="username">
  </div>
  <div class="form__field">
    <label class="form__label" for="password">Password</label>
    <input class="form__input form__input--password" type="password" name="password" id="password">
  </div>
  <button class="form__button form__button--submit" type="submit">Sign In</button>
</form>

Trong ví dụ này, block chính là form, trong đó có một biến thể là `form--login` để chỉ rõ đây là form đăng nhập. Khối form có hai phần tử con, form_field và `form_button`, nó bao gồm các phàn tử con chẳng hạn như các label và các input. Những phần tử input có modifier form__input--username và form__inpurt--password để chỉ ra mục đích của nó.

CSS:

.form {
  /* styles for the main form block */
}

.form--login {
  /* styles for the login form modifier */
}

.form__field {
  /* styles for the field element */
}

.form__label {
  /* styles for the label element */
}

.form__input {
  /* styles for the input element */
}

.form__input--username {
  /* styles for the username input modifier */
}

.form__input--password {
  /* styles for the password input modifier */
}

.form__button {
  /* styles for the button element */
}

.form__button--submit {
  /* styles for the submit button modifier */
}

Trong Css, mỗi phần tử đã được xây dựng khu vực để style riêng việc, dựa trên block, element, hoặc modifirer. Bạn có thể xây dựng css vào từng khối, chẳng hạn như .form hoặc những element cụ thể hoặc những modifier chẳng hạn như .form__input--username.

Xậy dựng block Post hiển thị thông tin bài viết với BEM?

Dưới đây là một ví dụ cơ bản về đặt tên khối Post hiển thị bài viết trên website với BEM.

<article class="post">
  <h2 class="post__title">My First Post</h2>
  <div class="post__content">
    <p>Here is the content of my first post.</p>
  </div>
  <div class="post__meta">
    <span class="post__meta-date">February 17, 2023</span>
    <span class="post__meta-author">By John Doe</span>
  </div>
</article>

Trong ví dụ này, khối chính là post, đại diện cho một bài viết trên blog. Khối oist có ba phần tử con: post__title, post__content, và post__meta. Phần tử post__title đại diện cho tiêu đề của bài viết, trong khi đó phần tử post__content chứa các nội dung của bài viết. Phần tử post__meta bao gồm thông tin phụ về bài viết chẳng hạn như ngày đăng và tác giả bài viết.

Css

.post {
  /* styles for the main post block */
}

.post__title {
  /* styles for the post title element */
}

.post__content {
  /* styles for the post content element */
}

.post__meta {
  /* styles for the post meta element */
}

.post__meta-date {
  /* styles for the post meta date element */
}

.post__meta-author {
  /* styles for the post meta author element */
}

Trong file Css, mỗi phần tử được định dạng riêng rõ ràng dựa trên block, element hoặc modifier. Bạn có thể thêm định dạng vào từng block như .post hoặc element như post__title hoặc modifier như post__meta-author.

Tại sao nên sử dụng BEM trong Html Css?

BEM (Block Element Modifier) là một quy tắc đặt tên phổ biến trong viết code html và css. Dưới đây là những lợi ích chính khi bạn sử dụng BEM.

Dễ nắm bắt: Là một người sử sử dụng Html, Css lâu năm tôi thấu hiểu được khó khăn của những người bắt đầu học lập trình web thường rất lúc túng khi đặt class cho các phần tử trên website. Và BEM là một giải pháp để mọi thứ trở nên dễ dàng hơn.

Khả năng mở rộng: BEM cung cấp một cách nhất quán cấu trúc viết class vậy nên tạo ra sự dễ dàng để mở rộng và bảo trì những dự án website lớn. Bằng việc tổ chức code theo cấu trúc block, element và modifier, những người phát triển website dễ dàng hiểu và điều chỉnh những phần cụ thể mà không bị ảnh hưởng tới những phần khác.

Tái sử dụng: BEM cho phép có thể tái sử dụng định dạng giữa các block, element có điểm chung.

Rõ ràng: BEM cung cấp các tên class rõ ràng và mang tính mô tả giúp các nhà phát triển hiểu được mục đích của từng phần tử và mối quan hệ của nó với các phần tử khác.

Tổng kết

Qua bài viết này tôi tin rằng bạn đã biết được BEM là gì và cách để sử dụng BEM hiệu quả trong quá trình xây dựng code html, css cho website.

Những ví dụ cách dùng BEM để tạo một số thành phần trên website bạn nên xem cẩn thận để hiểu được cách sử dụng nó.

Với những lợi ích rất tuyệt vời mà BEM mang lại như dễ nắm bắt, dễ mở rộng, tái sử dụng, rõ ràng bạn hãy sử dụng nó sớm vào trong việc học tập và phát triển công việc của mình.

Nếu bạn muốn tìm hiểu thêm về học lập trình web đi làm bạn hãy khá phá lộ trình học web đi làm tại unitop.vn dưới sự kèm cặp của tôi tới khi đi làm.

Có câu hỏi gì liên quan, bạn hãy để lại ở phần comment, bây giờ xin chào và hẹn gặp lại!