자산 (이미지, CSS, JS)에 대한 명명 규칙?
웹 프로젝트에 사용되는 이미지, 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등
그래서, 당신은 어떻게 생각하고 명명 규칙은 무엇 입니까?
CSS 파일을 폴더에 css, Javascript를에 js, 이미지를에 images, ... 원하는대로 하위 폴더를 추가합니다. 개별 파일 수준에서 명명 규칙이 필요하지 않습니다.
나는 프론트 엔드 개발자를 많이에서 멀리 이동 나타났습니다 css과 js찬성 styles및 scripts기타 등이있는 물건, 일반적으로이 있기 때문에 .less, .styl그리고 .sass일부뿐만 아니라이, .coffee. 사실, 선택한 폴더 구성에서 특정 기술 선택을 사용하는 것은 모든 사람이 그렇게하더라도 나쁜 생각입니다. 저는 다음과 같이 존경받는 개발자들이 본 표준을 계속 사용할 것입니다.
src/htmlsrc/imagessrc/stylessrc/styles/fontssrc/scripts
그리고 그들의 대상 빌드 동등 물은 그들이 빌드하는 dest것에 따라 때때로 접두사가 붙습니다 .
./imagesstylesstyles/fontsscripts
이를 통해 모든 파일을 ( src디렉토리를 분리하는 대신) 함께 모으고 자하는 사람들은이를 유지하고 분리 된 파일과 명확하게 관련된 것을 유지할 수 있습니다.
나는 실제로 조금 더 나아가서
scripts/beforescripts/after
어떤 두 가지로 smooshed 취득 main-before.min.js및 main-after.min.js스크립트, 헤더 하나 (의 필수 요소 normalize및 modernizr그 예를 들어, 초기 실행해야합니다)와 after그 자바 스크립트 기다릴 수 있기 때문에 몸에 마지막을 위해. Google의 기본 페이지와 마찬가지로 읽기 용이 아닙니다.
빌드 규칙에서 처리되는 특정 캐시 관리 접근 방식으로 인해 최소화하고 링크 된 상태로 두는 것이 적합한 스크립트와 스타일 시트가있는 경우.
요즘 gulp 또는 grunt 와 같은 일종의 빌드 프로세스를 사용 하지 않는 경우 고려해야 할 대부분의 모바일 중심 성능 목표에 도달하지 못할 수 있습니다.
/자산/
/ Css
/ 이미지
/ Javascript (또는 스크립트)
/ 최소화
/출처
내가 본 최고의 구조이며 내가 선호하는 구조입니다. 폴더를 사용하면 설명이 포함 된 이름으로 CSS 등을 접두사로 사용할 필요가 없습니다.
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
첫째, 폴더로 나누어 : 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 개가 넘을 수 있고 쉽게 완전히 혼합되고 이름이 혼동 될 수 있으므로 이미지를 정리하는 것이 중요합니다.
나는 smdrager가 제안한 것과 같은 일반적인 것을 피하는 경향이 있습니다. "mysite.main.css"는 전혀 의미가 없습니다.
"mysite"는 무엇입니까 ?? 내가 작업중인 이건? 그렇다면 정말 분명하지만, 그것이 무엇인지, 그리고 이것이 명백한 것인지 이미 생각하고 있습니다!
"메인"은 무엇입니까? "Main"이라는 단어는 해당 css 파일에있는 내용에 대한 코더 지식 외부의 정의가 없습니다.
특정 시나리오에서는 괜찮지 만 "top-nav.css"또는 "top-main-logo.png"와 같이 "top"또는 "left"와 같은 이름도 피하십시오.
다른 곳에서도 같은 것을 사용하고 싶을 수도 있고, 바닥 글이나 "top-banner.png"라는 메인 페이지 콘텐츠에 이미지를 넣는 것은 매우 혼란 스럽습니다!
주어진 파일 내에서 CSS가 무엇인지 묘사하는 적절한 명명 규칙을 허용하기 위해 좋은 수의 스타일 시트를 갖는 데 아무런 문제가 없습니다.
사이트의 크기와 기능, 사이트에있는 다른 블록의 수에 따라 얼마나 많은가 결정됩니다.
I don't think you need to state "CSS" or "STYLE" in the css filenames at all, as the fact it's in "css" or "styles" folder and has an extension of .css and mainly as these files are only ever called in the <head> area, I know pretty clearly what they are.
That said, I do this with library, JS and config (etc) files. eg libSomeLibrary.php, or JSSomeScript.php. As PHP and JS files are included or used in various areas within other files, and having info of what the file's main purpose is within the name is useful.
eg: Seeing the filename require('libContactFormValidation.php'); is useful. I know it's a library file (lib) and from the name what it does.
For image folders, I usually have images/content-images/ and images/style-images/. I don't think there needs to be any further separation, but again it depends on the project.
Then each image will be named accordingly to what it is, and again I don't think there's any need for defining the file is an image within the file name. Sizes can be useful, especially for when images have different sizes.
site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
etc
A good rule to follow is: if a new developer came to the files, would they sit scratching their head for hours, or would they likely understand what things do and only need a little time researching (which is unavoidable)?
As anything like this, however, one of the most important rules to follow is simply constancy!
Make sure you follow the same logic and patterns thoughout all your naming conventions!
From simple css file names, to PHP library files to database table and column names.
You can name it like this:
/assets/css/ - For CSS files
/assets/font/ - For Font files. (Mostly you can just go to google fonts to search for usable fonts.)
/assets/images/ - For Images files.
/assets/scripts/ or /assets/js/ - For JavaScript files.
/assets/media/ - For video and misc. files.
You can also replace "assets" with "resource" or "files" folder name and keep the name of it's subfolders. Well having an order folder structure like this isn't very important the only important is you just have to arrange your files by it's format. like creating a folder "/css/" for CSS files or "/images/" for Image files.
The BBC have tons of standards relating web development.
Their standard is fairly simple for CSS files:
http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml
You might be able to find something useful on their main site:
http://www.bbc.co.uk/guidelines/futuremedia/
This is an old question, but still valid.
My current recommendation is to go with something in this lines:
- assets (or assets-web or assets-www); this one is intended for static content used by the client (browser)
- data; some xml files and other stuff
- fonts
- images
- media
- styles
- scripts
- lib (or 3rd-party); this one is intended for code you don't make or modify, the libraries as you get them
- lib-modded (or 3rd-party-modified); this one is intended for code you weren't expected to modify, but had to, like applying a workaround/fix in the meantime the library provider releases it
- inc (or assets-server or assets-local); this one is intended for content used server side, not to be used by the client, like libraries in languages like PHP or server scripts, like bash files
- fonts
- lib
- lib-modded
I marked in bold the usual ones, the others are not usual content.
The reason for the main division, is in the future you can decide to server the web assets from a CDN or restrict client access to server assets, for security reasons.
Inside the lib directories i use to be descriptive about the libraries, for example
- lib
- jquery.com
- jQuery
- vX.Y.Z
- jQuery
- github
- [path]
- [library/project name]
- vX.Y.Z (version)
- [library/project name]
- [path]
- jquery.com
so you can replace the library with a new one, without breaking the code, also allowing future code maintainers, including yourself, to find the library and update it or get support.
Also, feel free to organize the content inside according to its usage, so images/logos and images/icons are expected directories in some projects.
As a side note, the assets name is meaningful, not only meaning we have resources in there, but meaning the resources in there must be of value for the project and not dead weight.
참고URL : https://stackoverflow.com/questions/2071687/naming-convention-for-assets-images-css-js
'Programing' 카테고리의 다른 글
| 다른 데이터로 동일한 JUnit 테스트 케이스를 여러 번 실행 (0) | 2020.10.22 |
|---|---|
| 음수가 될 수없는 값에 대해 C #에서 uint를 사용해야합니까? (0) | 2020.10.22 |
| JDK 소스 코드가 '휘발성'인스턴스의 '최종'복사본을 사용하는 이유 (0) | 2020.10.22 |
| Shiny에서 '최대 업로드 크기 초과'제한을 변경하고 사용자 파일 입력을 저장하는 방법은 무엇입니까? (0) | 2020.10.22 |
| 클라이언트 3000을 확인할 수 없습니다. (0) | 2020.10.22 |