QUY TẮC ĐẶT TÊN FILE MÀ MỘT NEW CODER CẦN BIẾT [ẢNH・ ID・ TÊN CLASS]

Một new coder rất hay lúng túng trong việc đặt tên file, id hay tên class. Cho nên trong bài viết này, tôi muốn tổng hợp các quy tắc, các bí kíp đặt tên cơ bản cho từng trường hợp trên. Hi vọng tài liệu này sẽ giúp đỡ các bạn phần nào trong quá trình làm việc.

CÁC ĐỀ MỤC PHỔ THÔNG

Những điểm lưu ý khi đặt tên file, tên id, class

Chúng ta sẽ bắt đầu từ việc tìm hiểu về những điều cần chú ý khi đặt tên file, id, class. Đây là những lưu ý hết sức đơn giản, hãy để tâm đến những điều này khi đặt tên nhé.

1.Chỉ sử dụng ký tự chữ số thường

Không được sử dụng tiếng Nhật, số, ký hiệu dạng in hoa, chữ katakana bé.

2.Chỉ sử dụng ký hiệu gạch nối 「-」, gạch chân dưới 「」_

Trong Window, không thể sử dụng các ký hiệu sau để đặt tên file: ký hiệu tiền Yên 「￥」, gạch chéo 「/」, dấu hai chấm 「:」, dấu hoa thị 「*」, dấu hỏi chấm 「?」, dấu ngoặc kép 「”」, dấu nhỏ hơn 「<」, dấu lớn hơn 「>」, dấu sổ dọc 「|」. Ngoài những ký hiệu trên, chúng ta cũng không nên dùng những ký hiệu dễ gây lỗi, bị xử lý sai trên chương trình.

3.Không nên sử dụng chữ phụ thuộc vào model

Cũng giống như ký hiệu, tránh sử dụng chữ phụ thuộc vào model để tránh gây ra lỗi.

4.Không sử dụng space ( cả space rộng và hẹp) Trường hợp tên file chứa space thì file đó có thể sẽ không được xử lý chính xác. Còn nếu tên id, tên class có chứa space thì hệ thống sẽ tự mặc định đó là một id, class riêng biệt khác.

5.Tên bắt buộc phải bắt đầu bằng chữ ( không được bắt đầu bằng số)

Nếu tên id, tên class bắt đầu bằng số thì sẽ không đọc được trên hệ thống, và không được chấp nhận.

6.Thống nhất là tên file tất cả đều dùng chữ thường

Ví dụ cách đặt tên sau là không đúng

• textfile.gif
• ￥￥text.gif
• img　text
• 500px

Ngoài ra trong bài viết này sẽ thống nhất là dùng dấu gạch chân để ngắt quãng khi đặt tên file, và đối với đặt tên id, tên class thì sẽ dùng phương pháp Lower Camel ( tức là sẽ viết hoa chữ cái đầu tiên của từ thứ hai trở đi※)

※ Ví dụ: dạng indexTest

TẬP HỢP TÊN FILE ẢNH

Quy tắc cơ bản

Về cơ bản chúng ta nên đặt tên thế nào cho hợp lý? Hãy cùng xem các ví dụ dưới đây để hiểu rõ hơn về các quy tắc cơ bản khi đặt tên:

• index_img01.jpg
• header_bg01.jpg
• news_ttl01.png
• page_ttl01.png
• btn_square_over.gif
• icon_triangle.gif
• nav_index_over.png

Các tên ở trên là được đặt dựa trên quy tắc sau:

「Tên page」「vùng miền」「chủng loại：bắt buộc」「chi tiết」「ký hiệu (serial number)」「trạng thái」「đuôi mở rộng」.

Mỗi bộ phận sẽ cách nhau bởi dấu gạch dưới 「_」

Tiếp theo tôi sẽ giải thích về từng bộ phận trong tên file.

1.「Tên page」

Vai trò của phần này chính là chỉ ra được ta đang sử dụng page nào. Tuy nhiên phần này sẽ không cần thiết trong trường hợp folder ảnh được chia theo từng page.

Ví dụ:

• Trường hợp folder ảnh không được chia theo từng page (/img/) > index_news_bg01.gif
• Trường hợp folder ảnh được chia theo từng page (/img/index/) > news_bg01.gif

2.「vùng miền」

Phần này cho biết là chúng ta đang sử dụng ở vùng nào vị trí nào. Tuy nhiên phần này sẽ không cần thiết trong trường hợp file ảnh không thuộc vùng nào cả.

• Trường hợp background sử dụng thông tin mới nhất > news_bg01.jpg
• Trường hợp ảnh sử dụng tại sidebar > side_img01.jpg

3.「chủng loại」

Phần này giúp chúng ta biết được ảnh đang sử dụng là thuộc loại nào. Một khi đã có thông tin loại ảnh thì chúng ta phải thêm thông tin đó vào trong tên file ảnh.

Ví dụ:

• File ảnh > img01.jpg
• Trường hợp logo ảnh được sử dụng tại header > header_logo.gif

4.「chi tiết」

Phần này được sử dụng để giải thích chi tiết hơn các thông tin liên quan đến chủng loại.

Ví dụ:

• Trường hợp nút send > btn_submit.png
• Trường hợp icon tròn > icon_circle01.png

5.「ký hiệu (serial number)」

Trong trường hợp dùng nhiều ảnh thì phải dùng ký hiệu để phân biệt. Lúc này ký hiệu bắt buộc phải là serial number.

Ví dụ:

• Ảnh A dùng ở Top page > index_img01.jpg
• Ảnh B dùng ở Top page > index_img02.jpg

6.「trạng thái」

Được sử dụng trong trường hợp cần nêu rõ trạng thái ví dụ như roll over hay current.

Ví dụ:

• Trường hợp ảnh được dùng tại global navi > nav_index_out.png,nav_index_over.png
• Trường hợp ảnh global navi thể hiện vị trí hiện tại là page index(※) > nav_index_over.png
• Ảnh dùng cho màn hình Retina > img_index_retina.png
• Trường hợp website đã được responsive, và ảnh chỉ sử dụng trên màn hình smartphone > img_index_sp.png

(※) Về mặt ý nghĩa thì current là chính xác, tuy nhiên có nhiều trường hợp ảnh đang được chi định là current nhưng lại được chỉ định thành dạng tương tự là over cho nên dùng over để tránh trường hợp 1 ảnh mà được tạo thành 2 lần.

Nếu đảm bảo những quy tắc đặt tên trên đây thì sẽ có những lợi ích sau:

• Chỉ cần dựa vào tên file, có thể suy đoán được ảnh thuộc loại nào.
• Chỉ cần nhìn tên file ảnh là biết được ảnh được dùng ở đâu.
• Bằng việc đặt tên ảnh mang ý nghĩa cấu trúc của ảnh, thì kể cả sau này có thay đổi ảnh đi chăng nữa thì không cần thay đổi tên ảnh mà vẫn có thể update được.

Những điểm cần chú ý khi đặt tên

Ngoài những quy tắc cơ bản trên, còn có những điểm cần lưu ý khi đặt tên như sau:

1.Trường hợp sử dụng tại vùng miền đặc biệt, thì tên vùng miền xuất hiện trong tên file ảnh

Ví dụ:

• Trường hợp sử dụng ảnh đặt ở tiêu đề > index_ttl01.gif
• Trường hợp ảnh dùng tại background của header > header_bg.gif

2.Trường hợp có nhiều ảnh dùng ở tiêu đề hoặc nhiều ảnh chụp thì phải dùng serial number để đặt tên

Ví dụ:

• Trường hợp ảnh dùng ở tiêu đề của Top page > index_ttl01.png
• Trường hợp dùng ảnh của blog page > blog_img01.jpg

3.Tại một bộ phận mà sử dụng nhiều ảnh thì phải dùng serial number để đặt tên

Ví dụ:

• Sử dụng hai ảnh tại background của header > header_bg 01.gif, header_bg 02.jpg

4.Trường hợp cùng bộ phận, cùng selector nhưng dùng các ảnh khác nhau, thì ngay sau tên bộ phận, phải gắn serial number vào.

Ví dụ:

• Dùng ảnh background tại tiêu đề A > ttl_bg01.gif
• Dùng ảnh background tại tiêu đề B > ttl_bg02.gif

5.Với những ảnh dùng trong roll over, thì dùng dấu gạch chân để ngăn cách và dùng những từ đơn thường để thể hiện trạng thái

• Thông thường: ○○_out.png
• Roll over: ○○_over.png
• Trạng thái chọn lựa ※１ ○○_selected.png
• Vị trí hiện tại ※２ ○○_current.png

Ví dụ:

• btn_contact_out.png
• btn_contact_over.png
• nav_news_selected.png
• nav_news_current.png

※１: dùng trong trường hợp ảnh được đăng kí có trạng thái là selected

※２: dùng trong trường hợp bao gồm cả nội dung trang tương đương với navi

Tổng hợp các 「chủng loại」

Tổng hợp các quy tắc về chủng loại của ảnh, tiêu đề hay các nút.

「chủng loại」

※１ Những ảnh sử dụng trong phần đề mục (hx) thì không cần gắn thêm tên hx vào để cho mang tính update hơn ( vì level của đề mục có thay đổi thì cũng không kéo theo sự thay đổi của tên ảnh)

※２ Vì có nhiều trường hợp được sử dụng độc lập nên những quy tắc trên chỉ sử dụng trong 「chủng loại」

Ví dụ:

• pagetop > pagetop.gif
• spacer > spacer.gif

Tổng hợp 「vùng miền」

Tổng hợp các quy tắc liên quan đến content hay category

「vùng miền」

TẬP HỢP TÊN ID, TÊN CLASS

Bây giờ chúng ta sẽ nói về quy tắc đặt tên id, tên class.

Những điểm lưu ý khi đặt tên

Tôi xin giới thiệu vài điểm lưu ý khi đặt tên id, tên class ( kèm ví dụ cụ thể )

1.Id được sử dụng trong vùng cấu thành lên layout tổng thể ( ví dụ header, thanh global navi, nội dung, sidebar, footer, section) ,còn class được sử dụng trong vùng miền chi tiết nhỏ của những vùng tổng thể trên.

Ví dụ:

• header > #header
• Global navi > #gNav
• Nút liên lạc > .btnContact
• Quay trở lại top page > .pageTop

2.Tên id, tên class không phụ thuộc vào phần design, cho nên cần đặt tên rõ ràng, không vòng vo, hiển thị rõ yếu tố “ở đâu”, ” thể hiện cái gì”

Ví dụ: cách đặt tên dưới đây là không chính xác

• Dòng chú thích phông chữ nhỏ hơn text thông thường > .small
• Comment chữ đỏ > .red
• Block phía bên trái > .left

Còn dưới đây là những cách đặt tên chính xác

• Dòng chú thích phông chữ nhỏ hơn text thông thường > .notes
• Comment chữ đỏ > .comment
• Block phía bên trái > .box

Sự khác biệt giữa hai cụm ví dụ NG và OK ở trên là

Tại trường hợp ví dụ NG: trong trường hợp màu của dòng chú thích biến đổi thì ý nghĩa “nhỏ” của dòng chú thích “small” cũng sẽ mất theo.

Thế nhưng, chỉ cần đặt tên id, tên class theo chú thích 「notes」, thì ngay cả khi màu sắc có thay đổi đi chăng nữa thì ý nghĩa của 「notes」 cũng không bị mất đi.

Cùng với giải thích đó, cách đặt tên id, tên class có liên quan đến design như là 「red」hay「left」sẽ không được ưa thích lắm.

3.Xét về mặt design, nếu 1 vùng nào đó không tái hiện lại được thì lúc đó hãy sử dụng inner ( ví dụ khi 2 background chồng lên nhau)

Ví dụ:

Trong trường hợp có thể tái hiện lại vùng, miền bằng before, after, thì không nên sử dụng inner để không gia tăng thêm những vùng không cần thiết.

4.Gắn tên id, class mang tính đa zi năng cho những thứ không có ý nghĩa cấu trúc.

Ví dụ:

• Box dùng cho layout > box
• Layout 2 column > unit2Col
• Layout 3 column > unit3Col

Tổng hợp tên id, tên class rất hay dùng

Mọi người thấy thế nào ạ.

Nếu mọi người áp dụng những quy tắc trên thì tôi tin chắc sẽ còn ít người lúng túng gặp khó khăn trong việc đặt tên file, tên id, tên class.

Tôi rất vui nếu tài liệu này giúp ích cho công việc của bạn.

Techtalk via Viblo