CSS Structure with LESS

This repository specifies the organizational structure I prefer for CSS. I had followed several guides that have led me to create this Frankenstein.

What you can do:

• Enjoy it
• Restructure it in any form or fashion that you so please
• Offer your own tips/suggestions

What About SASS/SCSS?

Originally, I templated this structure for .scss because of a project at my new job (I had only used LESS at my old job). I was hoping to incorporate this structure into a new project. However, being not quite as familiar with SASS as I was with LESS, I quickly discovered that @import "sassfile" duplicated the content from sassfile.

This is not the case with LESS.

Imports from LESS merely reference the file without duplication. I will go into more detail in a blog post that is coming soon! - Last updated 1:05 PM / August, 10, 2016

However, this is soon to change with the release of SASS 4.0 or so I have read.

Inspiration

Several reasons that I created this project:

• Folder structure is intuitive
• Attempts to address (respect) CSS specificity
• I was tired of doing it a million times with every new project!

Sources:

• ITCSS - A video that introduced me to ITCSS. Do NOT be discouraged by video length - worth the entire watch!
• Reddit - random Reddit comment that pointed me to the light

Version

1.0.0

File format

.less

Folder structure

.
+-- base
|   +-- _general.less       (Modifications to html, body, main, etc.)
|   +-- _layout.less        (Classes such as containers or rows)
|   +-- _utilities.less     (Common classes similar to 'is-hidden' or 'text-center')
|   +-- _typography.less    (Font elements such as anchor tags, header tags, etc.)
|   +-- base.less           (Imports files in this directory)
+-- components              (These should be straight-forward :P)
|   +-- _buttons.less       (Styles for buttons)
|   +-- _footer.less        (Styles for the footer)
|   +-- _forms.less         (Styles for forms)
|   +-- _header.less        (Styles for the header)
|   +-- _sections.less      (Styles for sections)
|   +-- _tables.less        (Styles for tables)
|   +-- components.less     (Imports files in this directory)
+-- variables
|   +-- _animations.less    (Include any animations)
|   +-- _colors.less        (Include your color/themes and global color names)
|   +-- _mixins.less        (Include all mix-ins)
|   +-- _general.less       (Include and general variables like @media screen breakpoints)
|   +-- _typography.less    (Include your font sources and global font names)
|   +-- variables.less      (Imports files in this directory)
+-- vendors
|   +-- bootstrap
|   +-- fontawesome
|   +-- _normalize.less     (Typically included in other vendor files, but just in case :) )
|   +-- vendors.less        (Imports files in this directory)
+-- main.less               (Imports all files)
+-- package.json            (Project information)
+-- README.md               (This file)

General rules/Suggestions

These are some general rules that I follow - feel free to modify them in any shape, form, or fashion.

• File naming:
  • Underscore
    • File names prepended with an underscore, "_header.less" are done so because:
      • It distinguishes them as an isolated piece
      • Many compilers ignore these files
  • No Underscore
    • File names that do not contain an underscore:
      • Import other files in the directory
      • Are compiled
• Create new component files as your project expands. Even if it is just a few lines of CSS! This helps maintain the isolation/modularization that is being attempted.
• Comment your code
• Consistent class naming is key and BEM is an example
• Non-specific/maintainable variable names (@font-primary, @color-primary, etc.)
• The ITCSS provides a good rule of thumb: nesting more than 3 levels is frowned upon
• Include media queries in same file (I prefer them nested within the classes)
• If you are creating variables that do not span across the entire project, include them in the component file only

Color Naming

I typically choose a color palette from coolors.co and use their color names to identify them. There is an example in the file:

_variables/colors.less

You will notice that I have imported a palette generated by coolors.co but then renamed them. These names are provided on coolors.co but can also be generated at another website, Name That Color, that I love to use when naming my colors.

In order to avoid memorizing HEX color codes, try variable names!

@color-cornflower-blue: #6195ED;

However, for the purposes of best practice, if we have a color that is used consistently (read: main or primary), then it would be best to name the color:

@color-primary: @color-cornflower-blue;
// or
@color-main: @color-cornflower-blue;

That way, if the designer decides to change the main/primary color, it only has to be done in one spot!

Tech

Only thing that you will need is a preprocessor compiler for LESS!

• Koala - A build-process free LESS/SASS compiler

That sounds simple enough, however, I suggest you get yourself a build process using:

• Gulp - the streaming build system
• Grunt - the JavaScript task runner
• Webpack - module bundler

Installation

There is no need to 'install' anything. Clone the repository, and copy the folder structure into your project. The only file that you will need to reference is in either your build process or compiler:

main.less

This lives at the root of the project directory.

Todos

• Improve README
• Blog post

Other good sources/tools

Here are some other good sources/tools on LESS, CSS and BEM (and more) that I have found useful!

• CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS
• LESS Tutorial - Good advice and a general guideline for LESS
• Code Smells in CSS - "How can you tell if your CSS code smells?"
• MindBEMding - getting your head around BEM syntax
• WinLESS - the LESS playground!
• Name That Color - get some interesting color names =)

SASSnPug2go

I am also working on a starter template project, SASSnPug2go for single page applications.

The technology uses:

• Pug - formerly known as Jade (HTML templating engine)
• Gulp - the streaming build system
• NodeJS - JavaScript backend
• ExpressJS - fast node.js network app framework
• SASS - CSS preprocessor 'that adds power and elegance to the basic language'

Please be aware that it is a work in progress =)

About Me

I am a software developer living in Nashville, TN. Feel free to contact me with any questions or concerns by visiting my website.

License

MIT