Menu

  • Trang chủ
  • Trending
  • Gợi ý bạn đọc

Chuyên mục

  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Cảm nhận cuộc sống

Liên hệ hợp tác

admin@genzakit.com
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả
  • Đăng nhập
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả

Tổng quan về BEM CSS

235
CHIA SẺ
3.6k
LƯỢT XEM
Chia sẻ lên FacebookChia sẻ lên TwitterLưu lại trên Pinterest

BEM (viết tắt: Block-Element-Modifier) là một tiêu chuẩn trong việc viết CSS, sử dụng BEM rất hữu ích – làm cho code CSS dễ đọc, hiểu, bảo trì hay mở rộng…

/* Block */
.block {}
/* Element */
.block__element {}
/* Modifier */
.block__element--modifier {}

Tại sao sử dụng BEM ?

  • Thống nhất
  • Tạo ra một cấu trúc có thể mở rộng và dễ bảo trì

Sử dụng thế nào ?

Block:
Phần tử cha ngoài cùng của thành phần nào đó (component – ví dụ một button) được định nghĩa là block (tạm dịch: khối).
Class này chứa những định dạng chung nhất và dùng để tái sử dụng
Element:
Trong một component có thể có một hoặc nhiều các phần tử gọi là elements. Các elements này bổ sung thêm các style mới cho block nhưng không ghi đè lại các style đã có của block.
Modifier:
Một block hoặc một element có thể có một biến thể được gọi là modifier.

Ví dụ:

Block không có elements hoặc modifiers:

Một component đơn giản có thể có một phần tử duy nhất, do đó có một class sẽ là block:

<style>
   .btn {}
</style>
<button class="btn"></button>

Component với modifier đơn giản:

Như đã nói ở trên, một component có thể có nhiều biến thể ( kiểu như nút bấm có nhiều màu, kích thước chữ khác nhau …) thì các biến thể phải được thể hiện bởi một class modifier. Class modifier để bổ sung class cơ sở (block) – không thay thế, ghi đè các thuộc tính của block.
Chuẩn ????:

<style>
   .btn {
      display: inline-block;
      color: blue;
   }
   .btn--secondary {
      color: green;
   }
</style>
<button class="btn btn--secondary"></button>

Chưa chuẩn ????:

<style>
   .btn--secondary {
      display: inline-block;
      color: green;
   }
</style>
<button class="btn--secondary"></button>

Component với elements:

Cấu trúc phức tạp hơn chút, có nhiều các element con. Mỗi element con cần một style phải gồm một class được đặt tên. Một trong những mục đích của BEM là nhất quán và ít đặc trưng riêng.
Chuẩn ????:

<style>
   .card { }
   .card__title { }
   .card__description { }
</style>
<div class="card">
   <h1 class="card__title"></h1>
   <p class="card__description"></p>
</div>

Chưa chuẩn ????:

<style>
   .card { }
   .card h1 { }
   .card p { }
</style>
<div class="card">
   <h1></p>
   <p></p>
</div>

Nếu cấu trúc của component có các element con mà trong element đó có thêm nhiều cấp độ, thì không nên viết element nhiều cấp độ.
BEM không khuyến khích cho cấu trúc “depth level”. Một class BEM biểu thị một element con của một component chỉ nên gồm tên của block và tên của element đó.
Chuẩn ????:

<style>
   .card { }
   .card__title { }
   .card__description { }
   .card__excerpt { }
   .card__button { }
</style>
<div class="card">
   <h1 class="card__title"></h1>
   <div class="card__description">
      <p class="card__excerpt"></p>
      <button class="card__button"></button>
   </div>
</div>

Chưa chuẩn ????:

<style>
   .card { }
   .card__title { }
   .card__description { }
   .card__description__excerpt { }
   .card__description__button { }
</style>
<div class="card">
   <h1 class="card__title"></h1>
   <div class="card__description">
      <p class="card__description__excerpt"></p>
      <button class="card__description__button"></button>
   </div>
</div>

Element với modifier:

Trong một vài trường hợp, bạn có thể muốn thay đổi một element duy nhất trong component thì modifier phải được thêm cho element đó thay vì cho element.

<style>
   .card { }
   .card__title { }
   .card__title--big { } /* thêm style bổ sung */
   .card__description { }
   .card__excerpt { }
   .card__button { }
</style>
<div class="card">
   <h1 class="card__title card__title--big"></h1>
</div>

Style các element dựa trên modifier:

Nếu bạn tùy biến các phần tử cùng một component giống định dạng nhau, cân nhắc việc thêm modifier cho block gốc của component và điều chỉnh styles cho mỗi element dựa trên modifier đó bằng cách thêm modifier. Việc này làm tăng tính riêng biệt, đặc trưng và làm cho các biến thể đơn giản hơn nhiều.
Chuẩn ????:

<style>
   .card--dark .card__title { }
   .card--dark .card__description { }
</style>
<div class="card card--dark">
   <h1 class="card__title"></h1>
   <p class="card__description"></p>
</div>

Chưa chuẩn ????:

<style>
   .card__title--dark { }
   .card__description--dark { }
</style>
<div class="card">
   <h1 class="card__title card__title--dark"></h1>
   <p class="card__description card__description--dark"></p>
</div>

Tên biến nhiều từ làm sao ?

Viết tách ra với dấu “-”, hạn chế viết tắt – trừ khi là các từ thông dụng.
Ví dụ: category-box

Kết luận????:

Đây là rất hay để viết CSS mà được coi là tiêu chuẩn, để mọi người trong cùng dự án có thể đọc và hiểu một cách nhanh chóng. BEM sẽ hữu dụng hơn khi được kết hợp với SASS.

Source: Medium, Viblo
Từ khoá: bemcss
Next Post

Mẹo “sơ cứu” laptop khi không may bị dính nước

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Có thể bạn quan tâm

Cách làm chè xoài giải nhiệt ngày hè

Cách làm chè xoài giải nhiệt ngày hè

by Huệ Minh
18 Tháng Chín, 2021
0
2.6k

Xoài là loại quả đặc trưng ở vùng nhiệt đới, chứa nhiều vitamin và khoáng chất có lợi...

Thịt gà rang sả ớt thơm ngon chuẩn vị cho bữa cơm gia đình

Thịt gà rang sả ớt thơm ngon chuẩn vị cho bữa cơm gia đình

by Huệ Minh
8 Tháng Mười Một, 2021
0
2.6k

Gà rang sả ớt với hương vị vừa cay vừa ngậy sẽ là món ăn lý tưởng để...

Lập trình viên… trưởng thành

by Huệ Minh
4 Tháng Chín, 2020
0
2.6k

Người ta thường dùng những danh hiệu như Fresher, Junior, Senior, … để chỉ cấp bậc hoặc kinh...

10 thói quen xấu mà một lập trình viên nên tránh

by Anthony Tran
9 Tháng Mười, 2019
0
2.4k

Lâu lâu rảnh rỗi ngồi lướt internet thì có đọc được bài này nên dịch về và chia...

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 Genzakit

Không có kết quả phù hợp
Xem tất cả kết quả
  • Trending
  • Gợi ý bạn đọc
  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Vui mỗi ngày
  • Cảm nhận cuộc sống

© 2022 Genzakit - Ngôi nhà giới trẻ

Chào mừng trở lại!

Đăng nhập bằng Facebook
Sign In with Google
OR

Đăng nhập

Quên mật khẩu?

Retrieve your password

Please enter your username or email address to reset your password.

Đăng nhập
wpDiscuz