1. 홈
  2. 질의 응답
  3. 애셋 (이미지, CSS, JS)의 이름 지정 규칙은 무엇입니까?

애셋 (이미지, CSS, JS)의 이름 지정 규칙은 무엇입니까?

2010-01-15 6 views
62

내 웹 프로젝트에 사용 된 이미지, js 및 css 파일과 같은 자산의 이름 지정 규칙을 찾는 데 여전히 어려움을 겪고 있습니다.애셋 (이미지, CSS, JS)의 이름 지정 규칙은 무엇입니까?

그래서, 내 현재는 다음과 같습니다

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 등

그럼 어떻게 생각하니 명명 규칙은 무엇입니까?

출처

2010-01-15 Max

+0

'자바 스크립트 파일 이름 지정 규칙'에 대해서만, http://stackoverflow.com/questions/7273316/what-is-the-javascript-filename-naming-convention에 대한 자세한 내용 ( –

답변

22

css의 CSS 파일, js의 자바 스크립트, images의 이미지 ... 맞는 것처럼 하위 폴더를 추가하십시오. 개별 파일 수준에서 명명 규칙을 사용할 필요가 없습니다.

출처

2010-01-15 13:16:47

+11

)에 동의합니다. 많은 알려진 프로젝트에 명명 규칙이 있음을 고려하십시오. jQuery를 보면'을 사용한다. - . .js' (예 :'jquery-1.4.2.min.js' 또는'jquery.plugin-0.1.js'). –

12 
 
/Assets/ 
    /Css 
    /Images 
    /Javascript (or Script) 
    /Minified 
    /Source

가 최고입니다 구조와 내가 선호하는 구조. 폴더를 사용하면 CSS 등 앞에 접두사를 붙일 필요가 없습니다.

출처

2010-01-15 14:18:48

+0

나는 이것을 좋아하지만 더 일반적인 루트 폴더는 "공개"또는 "콘텐츠"라고 생각합니다. –

+0

처음으로 '자산'에 대한이 파일 구조를 보았을 때 Angular 단일 페이지 응용 프로그램을 탐색했습니다. 이 애플리케이션은 Angular 단일 페이지 앱 튜토리얼에 많이 사용됩니다. –

9

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

출처

2010-07-29 19:45:56

5

우선 , 나는 폴더로 나눕니다 : css, js, img.

사이트에 js 및 css 파일 (구성 요소 포함)이 포함될 수 있으므로 프로젝트 이름이 파일 앞에 붙습니다. 따라서 파일이 사이트의 특정 위치 또는 플러그인과 관련되어 있음을 알 수 있습니다. 이미지의 사용에 의해 구분됩니다 마지막으로 js/jquery.validate.js

js/jquery-1.6.1.js

처럼

css/mysite.main.csscss/mysite.main.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 개가 넘고 쉽게 혼합 될 수있다. gether 및 혼란스럽게 명명 된.

출처

2011-05-31 21:10:43 smdrager

+1

'img/con'? Windows 기반 시스템에 이러한 파일을 저장하지 않는다고 생각하십니까? _con_는 [예약 된 MS-DOS 장치 드라이버 이름이며 파일 이름으로 사용할 수 없습니다] (http://support.microsoft.com/kb/74496/en-us)가 표시됩니다. –

+0

img는 폴더 이름으로 좋아합니다. 그 이유는 태그 이름이 ** img **, ** image **가 아니기 때문입니다. – user949300

6

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

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

"메인"이란 무엇입니까? "Main"이라는 단어는 css 파일 내에있는 내용에 대한 코더의 지식 밖에 정의가 없습니다.

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

주어진 파일 내에 CSS가 무엇인지 알맞은 명명 규칙을 허용하는 데 유용한 스타일 시트가 있으면 어떤 문제도 나타나지 않습니다.
사이트의 크기와 기능, 사이트에있는 블록의 수에 따라 전적으로 달라질 수 있습니다.

난 당신이 모든에 CSS 파일 이름에 "CSS"또는 "STYLE"을 명시 할 필요가 있다고 생각하지 않는 사실은이 같은 주로 "CSS"또는 "스타일"폴더에 그리고 .css의 확장을 가지고 있으며, 같은 파일은 <head> 영역에서만 호출되며, 나는 그들이 무엇인지 꽤 잘 알고 있습니다.

그렇다면 라이브러리, JS 및 구성 (etc) 파일에서이 작업을 수행했습니다. 예 : libSomeLibrary.php 또는 JSSomeScript.php. PHP 및 JS 파일은 다른 파일의 여러 영역에 포함되거나 사용되므로 파일의 주요 목적이 이름 내에 무엇인지에 대한 정보를 갖는 것이 유용합니다.

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

이미지 폴더의 경우 일반적으로 images/content-images/ 및 images/style-images/입니다. 나는 더 이상의 분리가 필요하다고 생각하지 않지만 다시 프로젝트에 의존한다.

그런 다음 각 이미지의 이름이 그대로 표시되며 파일 이름을 정의 할 필요가 없다고 생각합니다. 크기는 특히 이미지의 크기가 다른 경우에 유용합니다.

사이트 로고 150x150.png
사이트 로고 35x35.png
가게 - 체크 아웃 버튼 - 40x40.png
가게-제거 항목-20x20.png
등

따라야 할 좋은 규칙은 다음과 같습니다. 새로운 개발자가 파일을 방문한 경우 몇 시간 동안 머리를 긁거나 앉아서 할 일을 이해하고 약간의 시간 만 조사하면됩니다 (피할 수없는)?

그러나 이와 같이 가장 중요한 규칙 중 하나는 불변량입니다.
모든 이름 지정 규칙이 동일한 논리와 패턴을 따르고 있는지 확인하십시오!
간단한 css 파일 이름에서부터 PHP 라이브러리 파일, 데이터베이스 테이블 및 열 이름에 이르기까지.

출처

2013-12-04 01:38:26 James

+0

이미지 크기에 대한 모호성을 제거하기 위해'site-logo-150w-150h.png','site-logo-w150x150h.png' 또는'site-logo-150w150h.png' - 생각 사이에서 논쟁 중입니까? –

29

내가, 일반적으로 다른 물건이 거기에 있기 때문에 프론트 엔드 개발자의 많은 styles 및 scripts에 찬성 css 및 js에서 멀리 이동 나타났습니다 등 .less, .styl 및 .sass뿐만 아니라, 같은 일부로서, .coffee. 사실, 여러분이 선택한 폴더 조직에서 특정 기술을 사용하면 모든 사람들이 그렇게하더라도 나쁜 생각입니다.

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

그리고 목적지 빌드 등가물 : 나는 내가이 존경 개발자로부터 참조 표준을 계속 사용할 것 때로는 접두사가인가 구축하는 내용에 따라 :

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

이 함께있는 모든 파일을 넣어 원하는 그 수 (보다는 src을 알리기 디렉토리)를 사용하여이를 지키고 깨지기 쉬운 것들을 명확하게 유지합니다.

사실은 약간의 학습과 가서 필수 normalize의 요소와 함께 (헤더 두 main-before.min.js 및 main-after.min.js 스크립트로 smooshed받을

  • scripts/before
  • scripts/after

, 하나를 추가 예를 들어 modernizr은 일찍 실행해야합니다.) 그리고 after은 자바 스크립트가 대기 할 수 있기 때문에 본문에서 마지막으로 사용합니다. 이들은 Google의 메인 페이지와 마찬가지로 독서를 목적으로하지 않습니다.

빌드 규칙에서 처리되는 특정 캐시 관리 방식으로 인해 링크를 단독으로 축소 및 연결하는 것이 의미있는 스크립트 및 스타일 시트가있는 경우.

요즘 어떤 종류의 빌드 프로세스 (예 : gulp 또는 grunt)를 사용하지 않는 경우 고려해야 할 대부분의 모바일 중심 성능 목표에 미치지 못하는 것 같습니다.

출처

2014-03-04 15:25:45 robmuh

+0

글꼴 파일 (.ttf, .eot 등)은 스타일/글꼴에 있습니까? –

+0

합리적으로 높은 아이디어입니다. 감사합니다! – xqoo0ooq

4

당신은 이런 식으로 이름을 지정할 수 있습니다 :/

/자산/CSS - CSS 파일의 경우

/자산/글꼴/- 폰트 파일의 경우. (주로 사용 가능한 글꼴을 검색하기 위해 Google 글꼴로 이동할 수 있습니다.)

/assets/images/- 이미지 파일의 경우.

/assets/scripts/또는/assets/js/- 자바 스크립트 파일의 경우.

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

"자산"을 "자원"또는 "파일"폴더 이름으로 대체하고 하위 폴더의 이름을 유지할 수도 있습니다. 이처럼 주문 폴더 구조를 갖는 것은 매우 중요하지 않습니다. 단지 중요한 것은 포맷으로 파일을 정렬해야한다는 것입니다. CSS 파일의 경우 "/ css /"폴더를 만들고 이미지 파일의 경우 "/ images /"폴더를 만드는 것과 같습니다.

출처

2015-04-02 03:50:24 Justin

관련 문제

 관련 문제