Frameworks are great but...
If you're like me when I started out, you'd usually download a CSS library (Bootstrap, Skeleteon, Semantic UI, or any number of The best CSS frameworks floating around the web).
Using frameworks are a great way to get started, but then you decide to start adding your own stylings to a project through a seperate style.css file. This works at first, until the file starts to look like the following.
Solution? I hope so
I decided there had to be an easy way to keep track of my custom stylings, so I created the following boilerplate. It doesn't actually include any CSS (because if it did, then I'd be making my own library). Rather, the point of the following is to give you a comment boilerplate to start with. An easier way to keep track of any additions you add to a project.
The code:
/*-------------------------------------------*\
Main stylings file structure
Index:
- 1. Import
- 2. Resets (HTML & Body)
- 3. Colour Palette
- 4. Typography
- 5. Layout
- 6. General (Images, videos, etc)
- 7. Navigation
/* If this file becomes more than 300 lines,
consider breaking it into individual files. */
This should be used as a basis when starting
a project and you want to get moving quickly
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
1. IMPORT
==========
Used for any import scripts - things like fonts
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
2. RESETS
==========
Used for any import scripts - things like fonts
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
3. COLOUR PALLETE
==========
Colours/Colors should be set globally to prevent
inconsistencies between design
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
4. TYPOGRAPHY
==========
Type should be set globally to prevent
inconsistencies between design
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
5. LAYOUT
==========
Layout should be used to add styling
to things like divs, rows, and columns
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
6. GENERAL
==========
General should be used for any image,
video or other effects globally
\*-------------------------------------------*/
/*-------------------------------------------*\
==========
7. NAVIGATION
==========
Navigation styling seperate from
any libraries being used
\*-------------------------------------------*/
Take it further
The idea behind this post is to encourage you to comment your CSS. Use it in conjunction with other CSS/SASS/SCSS principles and architectures like the 7-1 principle. With anything though, don't just blindly copy it (yes I've been guilty of this in the past) but rather learn from it and improve on it. Kevin Powell has a great video on the 7-1 principle and how he's adjusted it to suit his needs.
If you haven't already, go and grab a copy of Steal Like An Artist and apply this to your coding. Web developers share code, it's not a secret. But make sure you understand what you're taking and learn from it. Otherwise, you'll spend all day on Stack Overflow, only to search the same issue 3 days later.
Change it. Improve it. Ignore it.
I promise I won't be offended, in fact, I'd love to hear your thoughts on what you decide though.
As designers/developers/someone with too much time on their hands, we usually don't think about handing over our code to anyone else - therefore, why would we worry about keeping our code organised? Well, it gets confusing, even to yourself, when you return to a project after some time and have no idea where you put that styling for the header image that appears only on the home page.
Spend the extra time early, to prevent headaches and confusion later. Trust me, I've been there soooooo many times. I only wish someone pointed me towards a comment boilerplate years ago.