Giao diện hoặc "phong cách" của một trang web được quyết định bởi CSS (Cascading Style Sheets). Đây là một tập tin bạn sẽ thêm vào thư mục của trang web của bạn mà sẽ chứa các quy tắc CSS khác nhau mà tạo ra các thiết kế trực quan và bố trí các trang của bạn.
Mặc dù các trang web có thể sử dụng và thường sử dụng nhiều trang tính nhưng không cần thiết phải làm như vậy. Bạn có thể đặt tất cả các quy tắc CSS của mình vào một tệp và thực sự có lợi cho việc này, bao gồm thời gian tải và hiệu suất trang nhanh hơn vì chúng không cần phải tìm nạp nhiều tệp. Mặc dù rất lớn, các trang web của doanh nghiệp có thể cần các trang mẫu riêng biệt vào những thời điểm, nhiều trang web nhỏ đến trung bình có thể hoạt động hoàn toàn tốt với chỉ một tệp. Đây là những gì tôi sử dụng cho hầu hết công việc thiết kế web của tôi - một tệp CSS duy nhất với tất cả các quy tắc mà các trang của tôi cần. Vì vậy, câu hỏi bây giờ sẽ trở thành - bạn nên đặt tên tệp CSS này là gì?
Khái niệm cơ bản về đặt tên
Khi bạn tạo một biểu định kiểu bên ngoài cho các trang web của mình, bạn nên đặt tên tệp theo các quy ước đặt tên tương tự cho các tệp HTML của bạn:
Không sử dụng các ký tự đặc biệt
Bạn chỉ nên sử dụng các chữ cái az, số 0-9, dấu gạch dưới (_) và dấu gạch nối (-) trong tên tệp CSS của bạn. Trong khi hệ thống tệp của bạn có thể cho phép bạn tạo tệp bằng các ký tự khác trong chúng, thì hệ điều hành máy chủ của bạn có thể gặp sự cố với các ký tự đặc biệt. Bạn an toàn hơn chỉ sử dụng các ký tự được đề cập ở đây. Sau khi tất cả, ngay cả khi máy chủ của bạn cho phép các ký tự đặc biệt, có thể không phải là trường hợp nếu bạn quyết định di chuyển các nhà cung cấp dịch vụ lưu trữ trong tương lai.
Không sử dụng bất kỳ khoảng trắng nào
Cũng giống như các ký tự đặc biệt, không gian có thể gây ra sự cố trên máy chủ web của bạn. Bạn nên tránh chúng trong tên tệp của mình. Tôi thậm chí còn làm cho nó một điểm để đặt tên tập tin như PDF bằng cách sử dụng các công ước tương tự, chỉ trong trường hợp tôi cần phải thêm chúng vào một trang web. Nếu bạn cảm thấy bạn cần một không gian để làm cho tên tệp dễ đọc hơn, hãy chọn dấu gạch ngang hoặc dấu gạch dưới để thay thế. Ví dụ, thay vì sử dụng "this is the file.pdf" Tôi sẽ sử dụng "this-is-the-file.pdf".
Tên tệp phải bắt đầu bằng một chữ cái
Mặc dù đây không phải là yêu cầu tuyệt đối, một số hệ thống gặp sự cố với tên tệp không bắt đầu bằng chữ cái. Ví dụ: nếu bạn chọn bắt đầu tệp của mình bằng ký tự số, điều này có thể gây ra sự cố.
Sử dụng tất cả chữ thường
Mặc dù điều này không bắt buộc đối với tên tệp, nhưng một số máy chủ web phân biệt chữ hoa chữ thường và nếu bạn quên và tham chiếu tệp trong một trường hợp khác, nó sẽ không tải. Trong công việc của riêng tôi, tôi sử dụng ký tự chữ thường cho mỗi tên tệp. Tôi đã thực sự tìm thấy điều này là một cái gì đó mà nhiều nhà thiết kế web mới đấu tranh để nhớ để làm. Hành động mặc định của họ khi đặt tên tệp là viết hoa ký tự đầu tiên của tên. Tránh điều này và nhận được vào thói quen của ký tự chữ thường.
Giữ tên tệp càng ngắn càng tốt
Mặc dù có giới hạn kích thước tên tệp trên hầu hết các hệ điều hành nhưng nó dài hơn nhiều so với tên tệp CSS hợp lý. Nguyên tắc chung là không quá 20 ký tự cho tên tệp không bao gồm phần mở rộng. Thực tế, bất cứ điều gì dài hơn nhiều là khó sử dụng và liên kết với mọi thứ!
Phần quan trọng nhất trong tên tệp CSS của bạn
Phần quan trọng nhất của tên tệp CSS không phải là tên tệp, mà là phần mở rộng. Các tiện ích mở rộng không bắt buộc trên các hệ thống Macintosh và Linux, nhưng bạn nên bao gồm một phần mở rộng khi viết một tệp CSS. Bằng cách đó bạn sẽ luôn biết rằng đó là một bảng định kiểu và không phải mở tệp để xác định nó là gì trong tương lai.
Nó có lẽ không phải là một bất ngờ lớn, nhưng phần mở rộng trên tập tin CSS của bạn nên là:
.cssQuy ước đặt tên tệp CSS
Nếu bạn chỉ có một tệp CSS trên trang web, bạn có thể đặt tên cho nó bất cứ điều gì bạn thích. Tôi thích:
styles.css hoặc default.cssVì hầu hết các trang web tôi làm việc trên đều bao gồm một tệp CSS duy nhất, những tên này hoạt động tốt cho tôi.
Nếu trang web của bạn sẽ sử dụng nhiều tệp CSS, hãy đặt tên cho các trang tính theo chức năng của chúng để nó rõ ràng chính xác mục đích của từng tệp là gì. Vì một trang Web có thể có nhiều tờ định kiểu được đính kèm với chúng, nó giúp phân chia các kiểu của bạn thành các trang tính khác nhau tùy thuộc vào chức năng của trang tính đó và các kiểu trong đó. Ví dụ:
- Bố cục và thiết kế layout.css design.css
- Các phần của trang main.css nav.css
- Toàn bộ trang web với các phần phụ mainstyles.css subpage.css
Nếu trang web của bạn sử dụng một khuôn khổ nào đó, bạn có thể sẽ nhận thấy rằng nó sử dụng nhiều tệp CSS, mỗi tệp dành riêng cho các phần khác nhau của trang hoặc các khía cạnh của trang web (kiểu chữ, màu sắc, bố cục, v.v.).
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 9/5/17