5 Steps to Organizing Your CSS Code

Some may think that organizing your CSS Styles can be annoying, but if you get into the habit of this, the website will be must better to maintain in the future.

Today we’ll be going through 5 Steps of Organizing Your CSS Code, these little tips are easy to start using today, helping you maintain a high standard when coding your CSS style sheets. 

Master Style Sheets

You can start with master style sheet, start with importing your style sheets including reset.css, global.css, structure.css and typography style sheets.

H4 { }

#snap_box h4 {

                padding: 20px;

                font: bold 10px “arial”, sans-serif; }

#side h4 {

                color: #000;

                font: bold 10px “arial”, sans-serif; }

.tagselection h4 {

                color: #ddd;

                font: bold 10px “arial”, sans-serif; }

Table of Contents

Using a table of content can be extremely helpful when building a large website with many stylings. This can be achieved at the top of the CSS document by outlining the different areas of your CSS document (eg. Header, navigation, forms, comments, footer). You can then breakdown each section.

Ordering Properties Alphabetically

Ordering your CSS Style properties into alphabetical order may sound like a drag, but if you get into the habit, it can help maintain a high standard with the quality of your CSS Style Sheets. You’ll find that properties are easier to find making future maintaining easier.

body {

                background: #ddd;

                color: #fff;

                font-size: 15px;

                line-height: 0.4;

                margin: 0;

                padding: 0;

}

Using Flags

Another tip is to use flags and divide your css style sheet into sections like Global Styles, Header, Layout Structure, Headings, Navigation, Forms, Comments etc.

/*-------------FLAG EXAMPLE--------------*/

Separate into Blocks

Another handy tip is separating you CSS Code into blocks, this is will benefit you greatly if you’ll need to maintain and edit the code on a monthly or yearly basis. This will save you lots of time when finding the appropriate classes and elements.

/* Header */, /*Navigation*/

I hope you found these 5 Steps to Organizing Your CSS Code useful, if so please share this page with your friends, or comment below if you have other ideas on how you Organize your CSS Code!