Quy ước đặt tên cho nội dung (hình ảnh, css, js)?

Tôi vẫn đang đấu tranh để tìm một quy ước đặt tên phù hợp cho các nội dung như hình ảnh, tệp js và css được sử dụng trong các dự án web của tôi.

Vì vậy, hiện tại của tôi sẽ là:

CSS: style-{name}.css
ví dụ: style-main.css, style-no_flash.css, style-print.css, vv

JS: script-{name}.js
ví dụ: script-main.js, script-nav.js, vv

Hình ảnh: {imageType}-{name}.{imageExtension}
{imageType} là bất kỳ trong số này

• biểu tượng (ví dụ: biểu tượng dấu chấm hỏi cho nội dung trợ giúp)
• img (ví dụ: hình ảnh tiêu đề được chèn qua <img />phần tử)
• nút (ví dụ: nút gửi đồ họa)
• bg (hình ảnh được sử dụng làm hình nền trong css)
• sprite (hình ảnh được sử dụng làm hình nền trong css và chứa nhiều "phiên bản")

Ví dụ, tên sẽ là: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif, vv

Vì vậy, bạn nghĩ gì và quy ước đặt tên của bạn là gì?

Tôi đặt các tệp CSS trong một thư mục css, Javascript trong js, hình ảnh trong images, ... Thêm các thư mục con khi bạn thấy phù hợp. Không cần bất kỳ quy ước đặt tên nào ở cấp độ các tệp riêng lẻ.

Tôi đã nhận thấy rất nhiều các nhà phát triển frontend được di chuyển ra khỏi cssvà jsủng hộ stylesvà scriptsvì có nói chung là những thứ khác trong đó, chẳng hạn như .less, .stylvà .sasscũng như, đối với một số người, .coffee. Thực tế là, sử dụng các lựa chọn công nghệ cụ thể trong lựa chọn tổ chức thư mục của bạn là một ý tưởng tồi ngay cả khi mọi người đều làm điều đó. Tôi sẽ tiếp tục sử dụng tiêu chuẩn mà tôi thấy từ các nhà phát triển được kính trọng này:

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

Và điểm đến của họ xây dựng tương đương, đôi khi được thêm tiền tố desttùy thuộc vào những gì họ đang xây dựng:

• ./
• images
• styles
• styles/fonts
• scripts

Điều này cho phép những người muốn gộp tất cả các tệp lại với nhau (thay vì chia nhỏ một srcthư mục) để giữ lại điều đó và giữ mọi thứ được liên kết rõ ràng với những tệp bị tách ra.

Tôi thực sự đi xa hơn một chút và thêm

• scripts/before
• scripts/after

Cái nào được chia thành hai main-before.min.jsvà main-after.min.jsscript, một cho tiêu đề ( ví dụ: với các yếu tố cần thiết normalizevà modernizrphải chạy sớm) và aftercho thứ cuối cùng trong phần nội dung vì javascript đó có thể đợi. Chúng không nhằm mục đích đọc, giống như trang chính của Google.

Nếu có các tập lệnh và biểu định kiểu phù hợp để giảm thiểu và để nguyên liên kết do một phương pháp quản lý bộ nhớ cache cụ thể được quan tâm trong các quy tắc xây dựng.

Ngày nay, nếu bạn không sử dụng một quy trình xây dựng nào đó, chẳng hạn như gulp hoặc grunt , bạn có thể không đạt được hầu hết các mục tiêu hiệu suất tập trung vào thiết bị di động mà bạn có thể nên xem xét.

/Tài sản/
  / Css
  / Hình ảnh
  / Javascript (hoặc Script)
    / Thu nhỏ
    / Nguồn

Là cấu trúc tốt nhất tôi đã thấy và là cấu trúc tôi thích hơn. Với các thư mục, bạn không thực sự cần đặt tiền tố cho CSS của mình, v.v. bằng các tên mô tả.

Đối với các trang web lớn, nơi css có thể xác định nhiều hình nền, quy ước đặt tên tệp cho các nội dung đó thực sự hữu ích để thực hiện các thay đổi sau này.

Ví dụ:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

Chúng tôi cũng đã thảo luận về việc thêm vào loại phần tử, nhưng tôi không chắc nó hữu ích như thế nào và có thể gây hiểu lầm cho các thay đổi bắt buộc trong tương lai:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

Bạn có thể đặt tên nó như thế này:

/ asset / css / - Đối với tệp CSS

/ asset / font / - Đối với tệp Phông chữ. (Hầu hết bạn chỉ có thể vào google phông chữ để tìm kiếm các phông chữ có thể sử dụng được.)

/ asset / images / - Đối với tệp Hình ảnh.

/ asset / scripts / hoặc / asset / js / - Đối với tệp JavaScript.

/ asset / media / - Đối với video và các nội dung khác. các tập tin.

Bạn cũng có thể thay thế "tài sản" bằng tên thư mục "tài nguyên" hoặc "tệp" và giữ nguyên tên của các thư mục con. Có một cấu trúc thư mục theo thứ tự như thế này không quan trọng lắm, điều quan trọng duy nhất là bạn phải sắp xếp các tệp của mình theo định dạng của nó. như tạo thư mục "/ css /" cho tệp CSS hoặc "/ images /" cho tệp Hình ảnh.

Trước tiên, tôi chia thành các thư mục: css, js, img.

Trong css và js, tôi đặt tiền tố cho các tệp với tên dự án vì trang web của bạn có thể bao gồm các tệp js và css là các thành phần, điều này làm rõ vị trí các tệp dành riêng cho trang web của bạn hoặc liên quan đến các plugin.

css/mysite.main.css css/mysite.main.js

Các tệp khác có thể giống như

js/jquery-1.6.1.js js/jquery.validate.js

Cuối cùng hình ảnh được chia theo cách sử dụng.

• img/btn/submit.png một nut bâm
• img/lgo/mysite-logo.png một logo
• img/bkg/header.gif một hình nền
• img/dcl/top-left-widget.jpg một phần tử decal
• img/con/portait-of-something.jpg một hình ảnh nội dung

Điều quan trọng là giữ cho hình ảnh có tổ chức vì có thể có hơn 100 và có thể dễ dàng bị trộn lẫn hoàn toàn với nhau và đặt tên gây nhầm lẫn.

Tôi có xu hướng tránh bất cứ điều gì chung chung, chẳng hạn như những gì smdrager đề xuất. "mysite.main.css" không có nghĩa gì cả.

"Mysite" là gì ?? Cái này tôi đang làm việc? Nếu vậy thì rõ ràng thực sự, nhưng tôi đã nghĩ nó có thể là gì và nếu nó là điều hiển nhiên!

"Chính" là gì? Từ "Main" không có định nghĩa ngoài kiến ​​thức của người viết mã về những gì có trong tệp css đó.

Mặc dù ổn trong một số trường hợp nhất định, bạn cũng nên tránh các tên như "trên cùng" hoặc "bên trái": "top-nav.css" hoặc "top-main-logo.png".
Bạn có thể muốn sử dụng cùng một thứ ở nơi khác và đặt một hình ảnh ở chân trang hoặc trong nội dung trang chính có tên "top-banner.png" là rất khó hiểu!

Tôi không thấy có vấn đề gì với việc có một số lượng bảng định kiểu để cho phép một quy ước đặt tên phù hợp để miêu tả css có trong tệp nhất định.
Số lượng bao nhiêu phụ thuộc hoàn toàn vào kích thước của trang web và (các) chức năng của nó, và có bao nhiêu khối khác nhau trên trang web.

Tôi không nghĩ rằng bạn cần phải ghi "CSS" hoặc "STYLE" trong tên tệp css, vì thực tế nó nằm trong thư mục "css" hoặc "styles" và có phần mở rộng .cssvà chủ yếu là những tệp này chỉ được gọi trong <head>khu vực, tôi biết khá rõ ràng họ là gì.

Điều đó nói rằng, tôi làm điều này với các tệp thư viện, JS và cấu hình (v.v.). ví dụ: libSomeLibrary.php hoặc JSSomeScript.php. Vì các tệp PHP và JS được bao gồm hoặc sử dụng trong các lĩnh vực khác nhau trong các tệp khác và việc có thông tin về mục đích chính của tệp trong tên là rất hữu ích.

Ví dụ: Xem tên tệp require('libContactFormValidation.php');là hữu ích. Tôi biết đó là một tệp thư viện (lib) và từ tên gọi của nó.

Đối với các thư mục hình ảnh, tôi thường có images/content-images/và images/style-images/. Tôi không nghĩ rằng cần phải có bất kỳ sự tách biệt nào nữa, nhưng một lần nữa nó phụ thuộc vào dự án.

Sau đó, mỗi hình ảnh sẽ được đặt tên tương ứng với tên của nó, và một lần nữa tôi không nghĩ rằng cần phải xác định tệp là hình ảnh trong tên tệp. Kích thước có thể hữu ích, đặc biệt là khi hình ảnh có các kích thước khác nhau.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png,
v.v.

Một quy tắc tốt cần tuân theo là: nếu một nhà phát triển mới đến với các tệp, họ sẽ ngồi vò đầu bứt tai hàng giờ, hay họ có thể hiểu những gì làm và chỉ cần một chút thời gian nghiên cứu (điều này là khó tránh khỏi)?

Tuy nhiên, như bất cứ điều gì như thế này, một trong những quy tắc quan trọng nhất cần tuân theo chỉ đơn giản là hằng số !
Đảm bảo rằng bạn tuân theo cùng một lôgic và các mẫu mà không có tất cả các quy ước đặt tên của bạn!
Từ tên tệp css đơn giản, đến tệp thư viện PHP đến tên bảng và cột cơ sở dữ liệu.

Đây là một câu hỏi cũ, nhưng vẫn còn giá trị.

Khuyến nghị hiện tại của tôi là đi với một cái gì đó trong dòng này:

• tài sản (hoặc tài sản-web hoặc tài sản-www); cái này dành cho nội dung tĩnh được sử dụng bởi máy khách (trình duyệt)
  • dữ liệu; một số tệp xml và những thứ khác
  • phông chữ
  • hình ảnh
  • phương tiện truyền thông
  • phong cách
  • tập lệnh
  • lib (hoặc bên thứ 3); cái này dành cho mã bạn không tạo hoặc sửa đổi, các thư viện khi bạn lấy chúng
  • lib-modded (hoặc bên thứ 3 sửa đổi); cái này dành cho mã mà bạn không mong đợi sửa đổi, nhưng phải, như áp dụng một giải pháp thay thế / sửa chữa trong thời gian chờ đợi nhà cung cấp thư viện phát hành nó
• inc (hoặc tài sản-máy chủ hoặc tài sản-cục bộ); cái này dành cho nội dung được sử dụng phía máy chủ, không được sử dụng bởi máy khách, như thư viện bằng các ngôn ngữ như PHP hoặc tập lệnh máy chủ, như tệp bash
  • phông chữ
  • lib
  • lib-modded

Tôi đã đánh dấu in đậm những nội dung thông thường, những nội dung khác không phải là nội dung thông thường.

Lý do cho sự phân chia chính là trong tương lai bạn có thể quyết định quản lý nội dung web từ CDN hoặc hạn chế quyền truy cập của khách hàng vào nội dung máy chủ, vì lý do bảo mật.

Ví dụ: bên trong các thư mục lib tôi sử dụng để mô tả về các thư viện

• lib
  • jquery.com
    • jQuery
      • vX.YZ
  • github
    • [con đường]
      • [tên thư viện / dự án]
        • vX.YZ (phiên bản)

vì vậy bạn có thể thay thế thư viện bằng một thư viện mới mà không vi phạm mã, cũng cho phép những người bảo trì mã trong tương lai, bao gồm cả bạn, tìm thư viện và cập nhật nó hoặc nhận hỗ trợ.

Ngoài ra, hãy tự do sắp xếp nội dung bên trong theo cách sử dụng của nó, vì vậy hình ảnh / biểu trưng và hình ảnh / biểu tượng là những thư mục được mong đợi trong một số dự án.

Lưu ý thêm, tên tài sản có ý nghĩa, không chỉ có nghĩa là chúng ta có tài nguyên trong đó, mà còn có nghĩa là tài nguyên trong đó phải có giá trị cho dự án và không có trọng lượng chết.

BBC có rất nhiều tiêu chuẩn liên quan đến phát triển web.

Tiêu chuẩn của chúng khá đơn giản cho các tệp CSS:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

Bạn có thể tìm thấy thứ gì đó hữu ích trên trang web chính của họ:

http://www.bbc.co.uk/guidelines/futuremedia/