Naming convention for assets (images, css, js)?
I've noticed a lot of frontend developers are moving away from css
and js
in favor of styles
and scripts
because there is generally other stuff in there, such as .less
, .styl
, and .sass
as well as, for some, .coffee
. Fact is, using specific technology selections in your choice of folder organization is a bad idea even if everyone does it. I'll continue to use the standard I see from these highly respected developers:
src/html
src/images
src/styles
src/styles/fonts
src/scripts
And their destination build equivalents, which are sometimes prefixed with dest
depending on what they are building:
./
images
styles
styles/fonts
scripts
This allows those that want to put all files together (rather than breaking out a src
directory) to keep that and keeps things clearly associated for those that do break out.
I actually go a bit futher and add
scripts/before
scripts/after
Which get smooshed into two main-before.min.js
and main-after.min.js
scripts, one for the header (with essential elements of normalize
and modernizr
that have to run early, for example) and after
for last thing in the body since that javascript can wait. These are not intended for reading, much like Google's main page.
If there are scripts and style sheets that make sense to minify and leave linked alone because of a particular cache management approach that is taken care of in the build rules.
These days, if you are not using a build process of some kind, like gulp or grunt, you likely are not reaching most of the mobile-centric performance goals you should probably be considering.
/Assets/ /Css /Images /Javascript (or Script) /Minified /Source
Is the best structure I've seen and the one I prefer. With folders you don't really need to prefix your CSS etc. with descriptive names.
I place CSS files in a folder css
, Javascript in js
, images in images
, ... Add subfolders as you see fit. No need for any naming convention on the level of individual files.