Ngu ngơ học làm web (7) - Một số nguyên tắc khi viết HTML & CSS

tiếp theo của: Ngu ngơ học làm web (6) - Cơ bản về CSS
---------

Phần 7.       Một số nguyên tắc khi viết HTML & CSS

Tới đây đã thấy quen quen với HTML và CSS rồi.

Xem clip sau để biết cách viết và tổ chức mã HTML & CSS tốt hơn (tác giả trình bày hơi chậm, nên thiết lập tốc độ phát là 1.25).


Một số nguyên tắc trong clip có nói tới:

-        Viết mã linh hoạt, dễ điều chỉnh (skinable)

Ví dụ: chỉ sử dụng HTML để tạo ra cấu trúc nội dung và ngữ nghĩa cho một trang web, việc trang trí, định dạng là nhiệm vụ của CSS.

-        Viết mã dễ đọc/dễ hiểu (sensible)


Khi cần đặt tên (id, class) nên chọn tên dễ hiểu/rõ nghĩa. Đặt tên theo danh từ (What – là gì?), hạn chế việc đặt tên theo tính từ/trạng từ (How), ví dụ: nên đặt là sidebar, header; không nên đặt là red_link, right_column.

Đọc thêm một số gợi ý về cách đặt tên: https://www.webfx.com/blog/web-design/css-tip-2-structural-naming-convention-in-css/

- Viết chú thích (comment) khi lập trình.

– Xây dựng một danh sách các tên thường dùng để các thành viên trong nhóm cùng thống nhất sử dụng.

Đọc thêm một số quy tắc do Google đề nghị:


-        Viết mã đơn giản (simple)


Viết mã đơn giản để viết nhanh, đọc nhanh và tăng tốc độ tải trang.

-        Viết mã có ngữ nghĩa (semantic)

Viết mã có ngữ nghĩa giúp máy tính và các hệ tự động có thể hiểu được mã nguồn. Hỗ trợ việc xử lý tự động, tăng thứ hạng trong các kết quả tìm kiếm (SEO).

Sử dụng các thẻ HTML phù hợp với mục đích.

-        Viết mã để trang web chạy nhanh (speed)

Trang web chạy nhanh giúp người sử dụng cảm thấy thoải mái, tăng hiệu quả của một website.

Các yếu tố ảnh hưởng tới thời gian hiển thị một trang web: quá trình client gửi request tới server, server xử lý request, truyền dữ liệu từ server về client, web client kết xuất trang web, quá trình hiển thị trang web tại client.

Tuy nhiên, cần lưu ý, mã nguồn chạy nhanh thường khó hiểu.


Đọc thêm các phương pháp để tăng tốc độ tải trang khi lập trình front-end: https://www.keycdn.com/blog/frontend-optimization

-        Viết mã theo chuẩn (standard)


Viết mã theo đúng chuẩn đã được quy định trong các đặc tả. 

Đọc thêm về Markup validator: https://validator.w3.org/; Acid3: https://en.wikipedia.org/wiki/Acid3

-        Viết mã an toàn (safe – fallback)

Khi viết mã, cần dự phòng cho các tình huống không mong muốn khi sử dụng, để trang web vẫn đạt được mục tiêu. Ví dụ: thiết lập ảnh nền cho trang web thì luôn dự phòng tình huống ảnh nền không tải về được (cần thiết lập màu nền phù hợp để dự phòng); khi người dùng tắt JavaScript trên trình duyệt thì sao?

-        Viết mã có cấu trúc (structural)


Tổ chức cấu trúc thư mục, tên tập tin và mã nguồn có cấu trúc hợp lý.

-        Học trong quá trình viết mã (study)

Học cách tìm kiếm, đọc/dịch thông báo lỗi do trình biên dịch trả về, học cách đọc tài liệu, ghi chép lại các thông tin hữu ích, theo dõi các tác giả/tạp chí/blog có uy tín trong lĩnh vực liên quan.


Chia sẻ kiến thức cho người khác.

-        Viết mã một cách thông minh (smart)


Làm việc hướng mục tiêu, hiệu quả, hợp lý hơn là máy móc, bảo thủ theo định kiến cá nhân. Trong nhiều trường hợp cần phải thỏa hiệp giữa: tính đơn giản – thời gian hoàn thành – tốc độ – chức năng – kinh phí – công nghệ.

-----------
Cập nhật 27/08/2020
-----------