---------
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.
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)
Sử dụng các thẻ HTML phù hợp với mục đích.
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ả.
-
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
-----------
Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (8) - Quy trình & công việc làm web
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (8) - Quy trình & công việc làm web