Những ai có kinh nghiệm làm việc trong môi trường chuyên nghiệp thì đều nhận ra level giữa Junior và Mid của lập trình viên thể hiện rõ nhất qua việc tổ chức code sao cho dễ đọc, dễ hiểu và dễ bảo trì về sau này.

Điều này được hiểu là như nào? Nó không chỉ là skill, mà còn là experience khi làm nhiều việc có tính tương đồng và đúc kết kinh nghiệm sao cho có thể giảm thời gian cho những thứ cơ bản. Một trong những vấn đề dễ nhìn nhất là cách đặt tên các class trong HTML, hoặc cách đặt tên biến trong code.

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

Đầu tiên, hãy chắc chắn bạn biết sử dụng đúng semantic HTML5 đã. Điều này quan trọng nhất mà rất nhiều bạn lập trình viên không nắm vững.

Đặt tên class thì cần phải có ngữ nghĩa. Mình là dân chuyên ngành ngôn ngữ (tốt nghiệp ĐH Ngoại ngữ ĐHQGHN với chuyên ngành phiên dịch), nên việc đặt tên với mình tương đối dễ. Mình thông thường sắp xếp thứ tự như sau cho một markup. Lưu ý trong code thì bạn đừng dùng tiếng Việt, rất “thiếu chuyên nghiệp” và dễ gây code render unicode có vấn đề.

Sub Title
Title
Intro (Large Description)
Description
Statistics Items
Button Text + Button URL
Note (Small Description)
Ví dụ tên class trong 1 markup HTML mobile

Về phần tổ chức layout, ta có thể chia thành các dạng sau:

Section
Wrapper
Container
Inner
Header
Main
Footer
Bố cục 1 section

Với một bố cục layout chia cột:

Grid
ColumnColumnColumn
InnerInnerInner
Image/IconImage/IconImage/Icon
TitleTitleTitle
DescriptionDescriptionDescription
ButtonButtonButton
Bố cục ví dụ 3 cột

Những điều cần lưu ý khi đặt tên HTML markup

  1. Đừng đặt tên theo style, dù thông thường điều này đúng. Một số markup có thể sẽ gây nhầm lẫn về Sub-Title/Label và Title, chẳng hạn cỡ chữ Sub-Title to hơn Title, nhưng thực chất khi hai element heading nằm cạnh nhau thì chỉ 1 element nên là Heading (Title) thôi.
  2. Khi có nhiều paragraph với các size khác nhau, hãy cho nó vào các khái niệm – Large – Normal – Small, (vd 18px là large, 16px là normal, và 14px là small).
  3. Khi trong bố cục grid chia cột, thì đặt luôn là Grid và Column cho dễ hình dung. Dùng Flexbox thì việc đặt Row như Bootstrap làm gần như không cần thiết.
  4. Đối với button khi có nhiều style, nên đặt lần lượt là primary, secondary, hoặc theo style có outline, link. Ít khi bí tên khi đặt class button, tham khảo thêm Bootstrap là có tên class.
  5. Các khu vực hiển thị thông qua việc trượt trái/phải, ví dụ mobile menu, popup, thì đặt tên là “slideout”, ví dụ “slideout-menu”.
  6. Các khu vực có ảnh lớn và nằm trên cùng trang, ngay dưới header, thường được gọi là Hero.

Xây dựng bố cục HTML chặt chẽ như thế nào?

Code HTML có thể là thứ căn bản nhất bạn cần biết, nhưng xây dựng bố cục HTML chặt chẽ và đảm bảo cần nhiều tình huống phát sinh và được dự đoán trước để xử lý.

Bố cục chia cột

Các bố cục chia cột thường tuân thủ nguyên tắc 1 cha (grid) và nhiều con (column). Có hai kiểu grid thông dụng:

  • Grid có biên (có khoảng cách giữa các cột)
  • Grid không biên (ví dụ dạng block 3 cột có viền)

Tổ chức grid có biên thì tương đối đơn giản, tự khoảng cách sẽ làm các bố cục vừa mắt.

Phần grid không biên thì phức tạp hơn và thường phát sinh một vấn đề mà 90% Junior Developer bỏ qua: khi viết element text dài quá thì thường bị tràn sát mép nhìn rất xấu và không pass QA. Hoặc khi design có các bố cục thu hẹp (vd 3 cột, nhưng trong cột chỉ 75% width), cũng dễ gặp tình huống bỏ qua chiều dài cột set nhỏ hơn (thường đặt tên là Inner).

Button bên trong Markup

Khi trong một bố cục Complex (phức hợp) với nhiều thành phần trong đó có Button, ví dụ:

  • Title
  • Description
  • Button
    Thì lưu ý cần tách Button ra vào trong 1 thẻ riêng để tránh lỗi cơ bản khi sử dụng Flexbox. Thực tế thì Title, Description đều là block trong khi Button thường là inline-block và không có width 100% nên cân vào dễ bị lệch.

Banner có ảnh nền

Việc sử dụng background image hiện tại không phải phương án khả thi và hơi kém về mặt hiệu suất so với sử dụng thẻ <img> , đặc biệt là khi nhiều trình duyệt hiện tại đã hỗ trợ lazy loading cho ảnh rồi. Cách thức là triển khai absolute cho ảnh và bọc ngoài bởi thẻ Image-Wrapper là relative để có phần tải ảnh hỗ trợ bởi các trình duyệt.

Kết luận

Bài viết này đúc kết một số kinh nghiệm triển khai markup HTML sao cho nhanh và tránh các lỗi phổ biến trong các dự án của CODE TỐT. Hi vọng khi các bạn tìm hiểu sâu hơn sẽ thấy ngấm hơn nhé.

Author

Khôi là Founder của CODE TOT JSC., công ty chuyên cung cấp dịch vụ website đa tính năng dành cho doanh nghiệp.

Write A Comment