Điểm bài viết [Tổng cộng: 9 Trung bình: 4.1]9 Trung bình: 4.1] 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 tên class cho các element của markup sao cho gọn, dễ nhớ và dễ sử dụng. 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ư Đ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 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: Ta sẽ sắp xếp theo thứ tự quan trọng sự xuất hiện nhé. 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: Ngoài ra, các bạn designer thường đặt tên theo 1 cách khác trong thiết kế: 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. Nhiều người biết đến HTML5 và Thẻ 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ớ.Tại sao bạn cần đặt tên class?
Bạn cần làm gì để đặt tên class đúng?
để 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
?
Các element nào sẽ xuất hiện trong
?
Heading Text
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
hoàn toàn sử dụng được
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
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?
Các quy tắc đặt tên class cho section hay 1 module
- 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
Ví dụ:
Hợp lý:2,
3,
4
Không hợp lý:5,
6,
7
- 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
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:
- Nhóm CTA [có đính kèm 1 button/link dạng CTA]: hero, intro, callout, newsletter
- Nhóm bố cục [chia cột]: list, grid, gallery, mosaic, collection, three-up, four-up, detail, row
- Nhóm nội dung: text, menu, single-image
- Nhóm đối tượng con: card, item, block
- 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 5, 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
- Headline
- SubHeadline
- Description hoặc Intro [thường nên đặt là Description]
Section Navigation
- Navigation hoặc Menu
- [Nhỏ hơn] Menu Item
Section List
- List hoặc Grid
- [Nhỏ hơn] Item hoặc Card
Section Layout [Nếu có layout 2 cột, trong đó 1 là sidebar] [Nếu có layout 2 cột, trong đó 1 là sidebar]
- Blocks hoặc Layout
- [Nhỏ hơn] Block [left + right], Aside và Main
Section Footer [thường chứa button CTA] [thường chứa button CTA]
- CTA hoặc Button
- 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é.
4.312đánh giá 12 đánh giá
Đánh giá bài viết
Post Views:4.759 4.759