BEM – Một quy tắc đặt tên class CSS thú vị và hiệu quả

There are only two hard problems in Computer Science: cache invalidation and naming things” — Phil Karlton.

Mình đã trích nguyên văn câu nói rất nổi tiếng của bác Phil Karlton ở bên trên đây.

Về bác này thì chắc mọi người cũng không còn quá xa lạ gì nữa rồi, giới lập trình ai mà chả biết bác này nhỉ 😉 .

Và hôm nay mình sẽ nói về ý thứ hai của câu nói trên, đó là về “naming things”. Cụ thể là cách đặt tên class trong CSS.

BEM là cái gì?

BEM là một quy tắc đặt tên class CSS giúp cho việc phát triển, debug code một cách nhanh chóng hơn. Tuy nhiên, trong thực tế thì việc này thường không tuân theo một quy tắc hay chuẩn mực nào hết.

Nhưng bạn đừng giống như họ, hãy học cái này để viết code trông đẹp hơn và giúp bảo trì code dễ dàng hơn nhé.

Cụ thể như sau:

Block

Một khối trong HTML sẽ có thể bao gồm nhiều khối khác nhau bên trong nó, và mỗi khối sẽ có một ý nghĩa nhất định.

    • Naming

      Tên của một block bao gồm các chữ cái Latins, chữ số và dấu gạch ngang.

    • HTML

      
      

       

 

  • CSS

    .block { color: #042; }

 

Element

Là một phần của block và không có ý nghĩa cụ thể.

    • Naming

      Tên của một block bao gồm các chữ cái Latins, chữ số, dấu gạch ngang và dấu gạch dưới.

    • HTML

      
      

       

 

  • CSS

    .block__elem { color: #042; }

 

Modifier

Khi định nghĩa CSS thì ngoài set size, background…cho các phần tử thì ta còn quan tâm đến color, shadow….Vì thế có thể dùng thêm các modifier giúp ta dễ phân biệt khi định nghĩa CSS.

  • Naming

    Tên của một block bao gồm các chữ cái Latins, chữ số, dấu gạch ngang và dấu gạch dưới.

  • HTML

     

  • CSS

    .block--hidden { }
    .block--mod .block__elem { }

Example

  • HTML

    <form class="form form--theme-xmas form--simple">
    
     <input class="form__input" type="text" />
    
     <input
    
     class="form__submit form__submit--disabled"
    
     type="submit" />
    
    </form>
  • CSS

    .form { }
    
    .form--theme-xmas { }
    
    .form--simple { }
    
    .form__input { }
    
    .form__submit { }
    
    .form__submit--disabled { }

Vậy là nội dung hôm nay chúng ta nói về quy tắc BEM đã hết rồi. Hi vọng với bài viết này sẽ giúp các bạn viết code CSS nhìn đẹp hơn và chuyên nghiệp hơn nhé 😉 .

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s