Đặt tên class trong section như thế nào?

Việc đặt tên class cho section có thể ảnh hưởng tới các element bên dưới, nên bạn cần lưu ý một số quy tắc để tránh việc đặt tên class dẫn tới nhập class bị dài và khó nhớ.

Các quy tắc đặt tên class cho section hay 1 module

1. Tên ngắn gọn, không quá 3 từ và cũng không nên chỉ duy nhất 1 từ hoặc 1 chữ cái. Đừng viết tắt. Các trường hợp đặc biệt cần tính đến là các module/section global scope, ví dụ header,

   0 hay

   1 mà thôi.
   Ví dụ:
   Hợp lý:

   2,

   3,

   4
   Không hợp lý:

   5,

   6,

   7

2. Tên class cần phản ánh chức năng hoạt động của module/section về mặt kĩ thuật (hơn là loại content). Lý do là ta tổ chức theo hướng tái sử dụng nên việc truyền dữ liệu gì không quan trọng bằng việc thống nhất bố cục và đáp ứng khả năng hiển thị về mặt kĩ thuật.
   Ví dụ:
   Hợp lý:

   8,

   9,

   0
   Không hợp lý:

   1,

   2,

   3

Hầu hết trong các tình huống ta gặp phải, các module và class sẽ trùng tên nhau để dễ quản lý cả về cấu trúc markup và styling.

Bạn có thể tham khảo demo template miễn phí trên Github này của mình để nắm được các module mình bóc tách ra và gọi vào từng page như thế nào.

Kết hợp từ, cụm từ trong đặt tên class cho section

Những từ và cụm từ sau có thể cân nhắc sử dụng và kết hợp:

1. Nhóm CTA (có đính kèm 1 button/link dạng CTA): hero, intro, callout, newsletter
2. Nhóm bố cục (chia cột): list, grid, gallery, mosaic, collection, three-up, four-up, detail, row
3. Nhóm nội dung: text, menu, single-image
4. Nhóm đối tượng con: card, item, block
5. Nhóm tính năng: slider, carousel, search, social-links, social-sharing, testimonials, widget, accordion, nav-trigger

Các gợi ý đặt tên cho element trong

Sau khi đặt tên class cho