Chọn tên phù hợp để gán cho DIV (tên của ID, tên lớp như bộ chọn) có vẻ như không có gì nghiêm trọng khi nghĩ đến, nhưng khi bạn tiến lên và trang web đã xong, có thể bạn sẽ bối rối vì tên của DIV. Và trước hết Kensfi đang nghĩ đến việc gỡ lỗi HTML / CSS.
Nếu chúng ta phải tính các quy tắc chung, chúng ta có thể nói rằng một tên DIV có thể bắt đầu bằng một chữ cái (aA-zZ), một dấu gạch ngang (-) và dĩ nhiên với một gạch dưới (_) và sau đó được theo sau bởi một lá thư, hoặc gạch dưới, và sau đó có thể có bất kỳ số lượng chữ cái, dấu gạch ngang, dấu gạch dưới hoặc số.
Mặc dù không có quy tắc nào cho việc đặt tên PROPER (tên theo ngữ pháp CSS ) với các ID và Classes thì có thể hữu ích cho bạn khi xem các quy tắc sau đây, tôi tôn trọng khi đặt tên cho CSS DIVs ( ID và Lớp học). Gợi ý – thứ tự không thực sự quan trọng.
1. Sử dụng tên chung. Ví dụ: thay vì sử dụng #homeContent, bạn sẽ sử dụng # nội dung . Nếu vì bất kỳ lý do nào bạn muốn sử dụng cùng một ID nhưng với một số thay đổi trên trang khác, bạn có thể thêm tên của trang dưới dạng hậu tố, ví dụ: #contentAbout .
2. Nếu cần một từ hai từ, hãy sử dụng từ thứ hai của chữ cái đầu tiên. Sẽ giúp đỡ trong khả năng đọc. Ví dụ: thay vì #bigbanner bạn sẽ sử dụng #bigBanner . Tôi đang làm điều này ngay cả đối với hình ảnh và nó hoạt động tốt.
3. Giữ nó ngắn. Ví dụ: thay vì .highlightsBlueBoxContent bạn sẽ chỉ sử dụng .blueBox . Rõ ràng, không có lý do để đặt tên dài nên tránh xa nó.
4. Không “trái” / “đúng”, “lên” / “xuống” hoặc thậm chí tệ nhất “đầu tiên” / “thứ hai” vv Tại sao không? Điều gì sẽ xảy ra nếu bạn muốn sử dụng cùng một phong cách bạn đã định nghĩa cho .leftColumn với cột ở bên phải, vân vân? Bạn sẽ phải có cùng tên DIV cho cột bên phải (cùng một cột .leftColumn , whaat ??) hoặc để sử dụng cùng một kiểu nhưng tạo một lớp mới (thêm mã). Cả hai lựa chọn đều sai, phải không? Hoặc, nếu bạn muốn sử dụng p.second hai lần trên trang, hoặc thậm chí nhiều hơn? Rõ ràng là sẽ có âm thanh lạ với p.second cho hơn một đoạn văn trên cùng một trang!
5. Sử dụng “phím tắt” cho tên dài. Hai “shortcuts” tôi đang sử dụng tất cả thời gian là: bkgd / bkgr (đối với nền) và txt (đối với văn bản – đang tiết kiệm một lá thư nhưng tôi thích nó). Ví dụ: # noBkgr và .contentTxt .
6. Được sử dụng để sử dụng # header , # sidebar , #footer . Đã là một loại quy tắc chung để có những tên này được sử dụng trong một tệp tin CSS và đang giúp đỡ rất nhiều việc xác định dễ dàng trong các khu vực thiết yếu của trang.
7. Cuối cùng nhưng không kém phần quan trọng, hãy thử sử dụng các từ thay vì kết hợp chữ cái / số. Ví dụ, thay vì sử dụng .pvtswt, bạn sẽ sử dụng .whateverOneSimpleWord . Sử dụng tên đơn giản và dễ phát âm / ghi nhớ sẽ giúp bạn giao tiếp dễ dàng với đồng nghiệp hoặc các ông chủ khi thảo luận (đặc biệt qua điện thoại) về những thay đổi của CSS. Giải thích không được hoan nghênh.
Như tôi đã nói ngay từ đầu, đây là những quy tắc tôi theo dõi hàng ngày. Bạn phải tuân theo các quy tắc này hay không. Sử dụng nó một cách thuận tiện. Sau khi tất cả chỉ là vấn đề sở thích cá nhân như thế nào bạn chỉ định tên cho CSS ID và Lớp học.
Tôi sẽ mở rộng danh sách này vì tôi sẽ đi cùng.
