V. Alexander's SCSS Library
This is merely a starting point for how I prefer to structure my CSS. I had followed several guides that have led me to create this Frankenstein. If you prefer LESS, you can view a version exactly like this!
What you can do:
- Restructure it in any form or fashion that you so please!
- Offer your own tips/suggestions.
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!
- 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
. +-- base | +-- _base.scss | +-- general.scss (Modifications to html, body, main, etc.) | +-- layout.scss (Classes such as containers or rows) | +-- shared.scss (Common classes similar to 'is-hidden' or 'text-center') | +-- typography.scss (Font elements such as anchor tags, header tags, etc.) +-- components (These should be straight-forward :P) | +-- _components.scss | +-- buttons.scss (Styles for buttons) | +-- footer.scss (Styles for the footer) | +-- forms.scss (Styles for forms) | +-- header.scss (Styles for the header) | +-- sections.scss (Styles for sections) | +-- tables.scss (Styles for tables) +-- variables | +-- _variables.scss | +-- animations.scss (Include any animations) | +-- colors.scss (Include your color/themes and global color names) | +-- general.scss (Include and general variables like @media screen breakpoints) | +-- mixins.scss (Include all mix-ins) | +-- typography.scss (Include your font sources and global font names) +-- vendors | +-- _vendors.scss | +-- normalize.scss (Typically included in other vendor files, but just in case :) ) +-- main.scss (Imports all files) +-- package.json (Project information) +-- README.md (This file)
These are some general rules that I follow - feel free to modify them in any shape, form, or fashion.
- The folder name prepended with an underscore will be the file that imports all files in the same directory
- Remember that if it isn't in this file, it won't be included.
- 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 (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
I typically choose a color palette from coolors.co and use their color names to identify them. There is an example in the file:
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!
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!
Only thing that you will need is a preprocessor compiler for SASS!
- Koala - A build-process free LESS/SASS compiler
That sounds simple enough, however, I suggest you get yourself a build process using:
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:
This lives at the root of the project directory.
- Improve README
- Create .sass version
Other good sources/tools
Here are some other good sources/tools on SASS, CSS and BEM (and more) that I have found useful!
- CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS
- SASS Best Practices - Good advice and a general guideline for SASS
- Code Smells in CSS - "How can you tell if your CSS code smells?"
- MindBEMding - getting your head around BEM syntax
- SASSmeister - the SASS playground!
- Name That Color - get some interesting color names =)