Organizing Your CSS

Organizing Your CSS

Organizing Your CSS

Formatting your CSS properly will benefit you down the road when you come back to make changes later. There are several ways you can organize your styles and in fact, you can even style the comments in your stylesheets. In CSS, comments are setup using /* and */ so for the example below would be a simple comment block:

/* Simple CSS Comment Block */

You can also get creative with your comments and use styled comment blocks. Check out some example comment styles below:

/* { navigation} */

/* ==[ global styles ]== */

/* === HEADER STYLES === */

/* ===GLOBAL=== */

/* FOOTER STYLES
------------- */

/* HYPERLINK STYLES === */

/* [[[ default html styles ]]] */

/*** FOOTER STYLES ***/

/* =============
MEDIA QUERIES
============= */

I think you get the picture, all that’s required is the opening and closing comment block characters, you can get creative with everything in between. CSS stylesheets can get large, in excess of 1000 lines, especially when working on big projects. In order to keep things organized you might consider segmenting your styles into several different stylesheets and rather than linking several stylesheets in your document, you should use CSS imports in your core stylesheet. Below is an example of how to setup your core stylesheet using imports to include all of your stylesheets:

/* === CSS IMPORTS === */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('/css/navigation.css');
@import url('/css/media.css');
@import url('/css/grid.css');
@import url('/css/print.css');

In the example above we are importing the Open Sans font from Google Fonts then we are including our four stylesheets. One stylesheet was setup to house all of the navigation menu styles, another for the media queries, one for the grid layout and lastly one for print styles. This is just one example of how you might setup your styles so that you have multiple files instead of one humongous stylesheet. By using these imports we are making our CSS organized and having all your imports in one core stylesheet reduces the number of HTTP requests your page requires which is always good from a performance standpoint.

Technically CSS will support single line comments using // but I don’t recommend you ever do this! If you have single line comments setup in your stylesheet like this, minifying the stylesheet will delete all of your styles.

SASS

Modern web designs are utilizing SASS to compile the CSS. SASS is awesome and helps front-end developers quickly build powerful and robust responsive web designs. If you aren’t already using SASS, you should! When using SASS you can retain all of your comments in your .sass or .scss files then compile your stylesheets to vanilla minified CSS.

I hope this article was inspiring and gave you some ideas on how to better organize your stylesheets. Please add your comments below if you have additional feedback or suggestions on how to best organize your CSS. Thanks for reading!

DIGITAL PCI © 2018