Cách đặt tên class cho element trong markup HTML

Một trong những lý do giúp Mid và Senior khác biệt với trình độ Junior trong phát triển web cơ bản chính là việc đặt tên class cho các element của markup sao cho gọn, dễ nhớ và dễ sử dụng.

Tại sao bạn cần đặt tên class?

Mỗi loại element trong website của bạn thường được sử dụng nhiều lần, chẳng hạn ảnh, video hay các đoạn Heading text. Nếu bạn không đặt tên (ở đây là gán class) mà chỉ đơn thuần sử dụng nó như <img> hay <h2> thì sớm muộn rồi cũng sẽ rơi vào tình cảnh các code style sẽ bị trùng lặp rất nhiều.

Bạn cần làm gì để đặt tên class đúng?

Điều đầu tiên là bạn cần nắm vững cấu trúc markup của chuẩn HTML5 đang rất phổ biến hiện nay. Ví dụ như bố cục layout default trông sẽ phải gồm các đối tượng nào.

Tiếp đến là bạn phải nắm được quy ước của tổ chức (Code Standards), chẳng hạn như sử dụng BEM, hoặc kiểu đặt tên class composit thì sẽ ra sao.

Sau cùng, bạn cần trải nghiệm nhiều, càng nhiều càng tốt, với nhiều website và các kiểu website khác nhau.

Trong phần giới thiệu sau đây, Code Tốt sẽ đưa ra những ví dụ cơ bản về cấu trúc sắp xếp theo <section> để các bạn hình dung.

Các kiểu cấu trúc section phổ biến

Khi nào bạn có thể sử dụng <section>?

Bạn có thể sử dụng tag này khi có Heading Text và các nội dung trình bày bên trong bố cục layout của bạn. Ví dụ như code dưới đây:

Các element nào sẽ xuất hiện trong <section>?

Ta sẽ sắp xếp theo thứ tự quan trọng sự xuất hiện nhé.

Heading Text

Heading sẽ xuất hiện theo thứ tự, có thể từ H1 hoặc H2 và đi dần xuống. Thông thường càng Heading nhỏ thì số lượng càng nhiều. Hiếm khi ta có 1 Heading 2 và ở dưới chỉ có 1 Heading 3 vì như vậy tính chất SEO không bền vững.

Ta sẽ đặt lần lượt như sau:

• Headline (thường là H1 hoặc H2)
• Title (thường là H3)
• SubTitle (thường là H4)
• SubHeading

Ngoài ra, các bạn designer thường đặt tên theo 1 cách khác trong thiết kế:

• Main Title (H1)
• Secondary Title (H2)
• Main Heading (H3)
• Sub-heading (H4)
• Label (H5-H6)

Dưới đây là 1 ví dụ, khi ta coi “Heading” ở tầng level 2 (thấp hơn) là Title, chứ không còn là Heading nữa.

Header

Nhiều người biết đến HTML5 và <header> tag, nhưng lại chỉ dùng nó để làm Header trên cùng website mà ít sử dụng nó ở chỗ khác. Trong <section> hoàn toàn sử dụng được <header> nhưng yêu cầu phải là bên trong chứa 1 Heading Text và 1 đoạn paragraph như thế này nhé:

 Article

Thẻ <article> cũng là một gợi ý hay nếu bạn có nhiều bài viết và muốn hiển thị dưới dạng trình bày thông tin. Lưu ý các thẻ này cần chứa 1 Heading (thường là Title của bài viết) và 1 đoạn paragraph, và tốt hơn kèm thêm cả ảnh và link tới bài viết đó ở trang riêng (single).

Đặ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, footer hay sidebar mà thôi.
   Ví dụ:
   Hợp lý: hero-block, intro-cta, post-grid
   Không hợp lý: hero, intro, blog-post-grid
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ý: footer-menu, collection-sorting, hero-carousel
   Không hợp lý: blog-post, program-list, for-teacher

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 <section>

Sau khi đặt tên class cho section, ta sẽ tiến hành thêm các class cho các element bên trong nó. Dưới đây là các gợi ý giúp bạn hình dung các lớp đối tượng được dễ dàng hơn.

Section Header

1. Headline
2. SubHeadline
3. Description hoặc Intro (thường nên đặt là Description)

Section Navigation

1. Navigation hoặc Menu
2. (Nhỏ hơn) Menu Item

Section List

1. List hoặc Grid
2. (Nhỏ hơn) Item hoặc Card

Section Layout (Nếu có layout 2 cột, trong đó 1 là sidebar)

1. Blocks hoặc Layout
2. (Nhỏ hơn) Block (left + right), Aside và Main

Section Footer (thường chứa button CTA)

1. CTA hoặc Button
2. Footer Bottom Text

Để tránh việc section chứa quá nhiều level, bạn nên sử dụng việc nhúng module nào vào section khác. Kết quả của việc này chẳng hạn sẽ như sau:

Kết luận

Code Tốt hi vọng bài viết sẽ hữu ích và giúp bạn tránh mất thời gian vào việc đặt tên class cho section và các element. Đừng quên đặt câu hỏi nếu bạn có điều gì chưa rõ nhé.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.