자산 (이미지, CSS, JS)에 대한 명명 규칙?

Question 1

웹 프로젝트에 사용되는 이미지, js 및 css 파일과 같은 자산에 대한 좋은 명명 규칙을 찾기 위해 여전히 고심하고 있습니다.

따라서 내 현재는 다음과 같습니다.

CSS : style-{name}.css
예 : style-main.css, style-no_flash.css, style-print.css등

JS : script-{name}.js
예 : script-main.js, script-nav.js등

이미지 : {imageType}-{name}.{imageExtension}
{imageType} 다음 중 하나입니다.

아이콘 (예 : 도움말 콘텐츠에 대한 물음표 아이콘)
img (예 : <img />요소 를 통해 삽입 된 헤더 이미지 )
버튼 (예 : 그래픽 제출 버튼)
bg (이미지는 CSS에서 배경 이미지로 사용됨)
스프라이트 (이미지는 CSS에서 배경 이미지로 사용되며 여러 "버전"을 포함 함)

예-이름은 다음과 같습니다 icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gif등

그래서, 당신은 어떻게 생각하고 명명 규칙은 무엇 입니까?

Question 2

CSS 파일을 폴더에 css, Javascript를에 js, 이미지를에 images, ... 원하는대로 하위 폴더를 추가합니다. 개별 파일 수준에서 명명 규칙이 필요하지 않습니다.

Question 3

나는 프론트 엔드 개발자를 많이에서 멀리 이동 나타났습니다 css과 js찬성 styles및 scripts기타 등이있는 물건, 일반적으로이 있기 때문에 .less, .styl그리고 .sass일부뿐만 아니라이, .coffee. 사실, 선택한 폴더 구성에서 특정 기술 선택을 사용하는 것은 모든 사람이 그렇게하더라도 나쁜 생각입니다. 저는 다음과 같이 존경받는 개발자들이 본 표준을 계속 사용할 것입니다.

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

그리고 그들의 대상 빌드 등가물은 빌드중인 항목에 dest따라 접두사 가 붙기도합니다.

./
images
styles
styles/fonts
scripts

이를 통해 모든 파일을 ( src디렉토리를 분리하는 대신) 함께 모으고 자하는 사람들은이를 유지하고 분리 된 파일과 명확하게 관련된 것을 유지할 수 있습니다.

나는 실제로 조금 더 나아가서

scripts/before
scripts/after

어떤 두 가지로 smooshed 취득 main-before.min.js및 main-after.min.js스크립트, 헤더 하나 (의 필수 요소 normalize및 modernizr그 예를 들어, 초기 실행해야합니다)와 after그 자바 스크립트 기다릴 수 있기 때문에 몸에 마지막을 위해. Google의 기본 페이지와 마찬가지로 읽기 용이 아닙니다.

빌드 규칙에서 처리되는 특정 캐시 관리 접근 방식으로 인해 최소화하고 링크 된 상태로 두는 것이 적합한 스크립트와 스타일 시트가있는 경우.

요즘 gulp 또는 grunt 와 같은 일종의 빌드 프로세스를 사용 하지 않는 경우 고려해야 할 대부분의 모바일 중심 성능 목표에 도달하지 못할 수 있습니다.

Question 4

/자산/
  / Css
  / 이미지
  / Javascript (또는 스크립트)
    / 최소화
    /출처

내가 본 최고의 구조이고 내가 선호하는 구조입니다. 폴더를 사용하면 설명이 포함 된 이름으로 CSS 등을 접두사로 사용할 필요가 없습니다.

Question 5

CSS가 많은 배경 이미지를 정의 할 수있는 대규모 사이트의 경우 이러한 자산에 대한 파일 명명 규칙이 나중에 변경하는 데 매우 유용합니다.

예를 들면 :

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

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

요소 유형 추가에 대해서도 논의했지만 이것이 얼마나 도움이되었으며 향후 필요한 변경에 대해 오해의 소지가있을 수 있는지 잘 모르겠습니다.

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

Question 6

다음과 같이 이름을 지정할 수 있습니다.

/ assets / css /-CSS 파일 용

/ assets / font /-글꼴 파일 용. (대부분 Google 글꼴로 이동하여 사용 가능한 글꼴을 검색 할 수 있습니다.)

/ assets / images /-이미지 파일 용.

/ assets / scripts / 또는 / assets / js /-JavaScript 파일의 경우.

/ assets / media /-비디오 및 기타 용. 파일.

"assets"를 "resource"또는 "files"폴더 이름으로 바꾸고 하위 폴더의 이름을 유지할 수도 있습니다. 이와 같은 순서 폴더 구조를 갖는 것은 그다지 중요하지 않습니다. 유일한 중요한 것은 파일을 형식별로 정렬해야한다는 것입니다. CSS 파일의 경우 "/ css /"폴더를 만들고 이미지 파일의 경우 "/ images /"폴더를 만듭니다.

Question 7

첫째, 폴더로 나누어 : css, js, img.

사이트에 구성 요소 인 js 및 css 파일이 포함될 수 있으므로 css 및 js 내에서 파일의 접두사를 프로젝트 이름으로 지정하면 파일이 사이트에 특정한 위치 또는 플러그인과 관련된 위치가 명확 해집니다.

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

다른 파일은 다음과 같을 수 있습니다.

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

마지막으로 이미지는 용도에 따라 나뉩니다.

img/btn/submit.png 단추
img/lgo/mysite-logo.png 로고
img/bkg/header.gif 배경
img/dcl/top-left-widget.jpg 데칼 요소
img/con/portait-of-something.jpg 콘텐츠 이미지

100 개가 넘을 수 있고 쉽게 완전히 섞여서 이름이 혼동 될 수 있으므로 이미지를 정리하는 것이 중요합니다.

Question 8

나는 smdrager가 제안한 것과 같은 일반적인 것을 피하는 경향이 있습니다. "mysite.main.css"는 전혀 의미가 없습니다.

"mysite"는 무엇입니까 ?? 내가 작업중인 이건? 그렇다면 정말 분명하지만, 그것이 무엇인지, 그리고 이것이 명백한 것인지 이미 생각하고 있습니다!

"메인"은 무엇입니까? "Main"이라는 단어는 해당 CSS 파일에있는 내용에 대한 코더 지식 외부의 정의가 없습니다.

특정 시나리오에서는 괜찮지 만 "top-nav.css"또는 "top-main-logo.png"와 같이 "top"또는 "left"와 같은 이름도 피하십시오.
다른 곳에서도 같은 것을 사용하고 싶을 수도 있고, 바닥 글이나 "top-banner.png"라는 메인 페이지 콘텐츠에 이미지를 넣는 것은 매우 혼란 스럽습니다!

주어진 파일 내에서 CSS가 무엇인지 묘사하는 적절한 명명 규칙을 허용하기 위해 좋은 수의 스타일 시트를 갖는 데 아무런 문제가 없습니다.
사이트의 크기와 기능, 사이트에있는 다른 블록의 수에 따라 얼마나 많은가 결정됩니다.

css 파일 이름에 "CSS"또는 "STYLE"을 명시 할 필요가 없다고 생각합니다. "css"또는 "styles"폴더에 .css있고 주로 이러한 파일이 호출되기 때문에 그 <head>지역에서 나는 그들이 무엇인지 아주 분명하게 알고 있습니다.

즉, 라이브러리, JS 및 구성 (기타) 파일로이 작업을 수행합니다. 예 : libSomeLibrary.php 또는 JSSomeScript.php. PHP 및 JS 파일은 다른 파일 내의 다양한 영역에서 포함되거나 사용되므로 파일의 주요 목적이 이름에 무엇인지에 대한 정보가 있으면 유용합니다.

예 : 파일 이름을 보는 require('libContactFormValidation.php');것이 유용합니다. 나는 그것이 라이브러리 파일 (lib)이고 이름에서 무엇을하는지 압니다.

이미지 폴더의 경우 일반적으로 images/content-images/및 images/style-images/. 더 이상 분리 할 필요가 없다고 생각하지만 다시 프로젝트에 따라 다릅니다.

그런 다음 각 이미지는 그에 따라 이름이 지정되며 파일 이름 내에서 파일을 정의 할 필요가 없다고 생각합니다. 크기는 특히 이미지의 크기가 다른 경우 유용 할 수 있습니다.

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

따라야 할 좋은 규칙은 다음과 같습니다. 새로운 개발자가 파일을 찾아 오면 몇 시간 동안 머리를 긁적 거리는 것일까 요, 아니면 어떤 일을하는지 이해하고 조사하는 데 약간의 시간 만 필요로할까요 (피할 수없는 일)?

그러나 이와 같이 따라야 할 가장 중요한 규칙 중 하나는 단순히 불변성입니다 !
모든 명명 규칙에서 동일한 논리와 패턴을 따라야합니다!
간단한 CSS 파일 이름에서 PHP 라이브러리 파일, 데이터베이스 테이블 및 열 이름까지.

Question 9

이것은 오래된 질문이지만 여전히 유효합니다.

내 현재 권장 사항은 다음과 같은 내용을 사용하는 것입니다.

자산 (또는 assets-web 또는 assets-www); 이것은 클라이언트 (브라우저)가 사용하는 정적 콘텐츠를위한 것입니다.
- 데이터; 일부 xml 파일 및 기타 항목
- 글꼴
- 이미지
- 미디어
- 스타일
- 스크립트
- lib (또는 타사); 이것은 당신이 만들거나 수정하지 않는 코드를위한 것입니다.
- lib-modded (또는 타사 수정) 이 코드는 수정할 것으로 예상되지 않았지만 라이브러리 제공자가 릴리스하는 동안 해결 방법 / 수정을 적용하는 것과 같이 수정해야했습니다.
inc (또는 assets-server 또는 assets-local); 이것은 PHP와 같은 언어의 라이브러리 또는 bash 파일과 같은 서버 스크립트와 같이 클라이언트가 사용하지 않는 서버 측에서 사용되는 콘텐츠를위한 것입니다.
- 글꼴
- lib
- lib-modded

나는 평범한 것을 굵게 표시했고 다른 것은 평범한 내용이 아닙니다.

주요 부서의 이유는 향후 보안상의 이유로 CDN에서 웹 자산을 서버로 처리하거나 서버 자산에 대한 클라이언트 액세스를 제한 할 수 있기 때문입니다.

예를 들어 라이브러리에 대해 설명하는 데 사용하는 lib 디렉토리 내부에서

lib
- jquery.com
  - jQuery
    - vX.YZ
- github
  - [통로]
    - [도서관 / 프로젝트 이름]
      - vX.YZ (버전)

따라서 코드를 손상시키지 않고 라이브러리를 새 것으로 교체 할 수 있으며, 자신을 포함한 향후 코드 유지 관리자가 라이브러리를 찾고 업데이트하거나 지원을받을 수 있습니다.

또한 용도에 따라 콘텐츠를 자유롭게 구성 할 수 있으므로 이미지 / 로고 및 이미지 / 아이콘은 일부 프로젝트에서 예상되는 디렉토리입니다.

참고로, 자산 이름은 의미가 있습니다. 이는 우리가 거기에 자원이 있다는 것을 의미 할뿐만 아니라 거기에있는 자원이 사하중이 아니라 프로젝트에 가치가 있어야한다는 것을 의미합니다.

Question 10

BBC에는 웹 개발과 관련된 수많은 표준이 있습니다.

CSS 파일의 표준은 매우 간단합니다.

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

메인 사이트에서 유용한 정보를 찾을 수 있습니다.

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