3 Tips For Mean, Clean CSS Code

So, you’ve learned the basics of CSS coding, you know how to reference tags and you even have a clue about what that whole “Cascade” part of the Cascading Style Sheet is all about. You’re ready to use your new skills to design or customize your awesome website. But how do you keep things organized when you start having hundreds of rules defined and your stylesheet extends to dizzying lengths?

1. Make yourself a template

Even if you’re not working as a web developer like I am, with continuous new sites to code from scratch, it’s a good idea to create a basic skeleton structure for your stylesheet to keep you organized as the number of styles you’ve defined starts to balloon. You can use CSS commenting to label sections of code, and a good text editor will even color-code your comments for visual organization while you’re working. In a CSS document, any text you place between comment tags will be ignored by browsers. CSS comment tags look like this: /* Your comment, note or section label here */

If you want my advice, organize your stylesheet to mirror your HTML structure. For PID, the CSS template I’ve created has separate sections for each of the following HTML sections of a WordPress site, with subdivisions as needed: General Layout, Header, Navigation, Main Content, Sidebar and Footer. In that order, just like the web pages the styles will be applying to.

Now, even if you don’t know exactly what line the style you want to edit is on, you’ll have an easier time finding it when you sift through your stylesheet, because the section you’re working on is cleanly labeled and all styles for that section are in the same place. This GREATLY minimizes confusion and conflicting style rules, especially if you are not the only coder working with this stylesheet!

2. Minimize your code

When you first learn CSS, it’s a great idea to set up your declaration blocks with lots of alignment and extra spacing so that it’s easy to see which styles are being applied to which selectors:

.selector-class {
font-family: Arial, Verdana, sans-serif;
color: #000000;
font-size: 1.2em;
}

Now, that’s all well and good, and when you’re learning, it’s highly recommended! But when you start having hundreds of styles, those nicely formatted blocks of code can start adding up QUICK, leaving you with stylesheets upwards of 800 lines long. No, thank you! Since browsers ignore spacing in CSS documents just like in HTML documents, it’s really just there to help me, and I don’t want its help! I want short stylesheets. Here is how I would set up the block of code above, giving me the exact same results:

.selector-class { font-family: Arial, Verdana, sans-serif; color: #000000; font-size: 1.2em; }

Now the same block of CSS code is taking up one line instead of 5 (Note: The styles are appearing on two lines here, and this often happens on a real stylesheet too, but in a text editor, it will still all be considered one line so that no matter what text editor you’re using to look at any given stylesheet, a style on line 56 is on line 56). If I have 100 styles defined I’ve just shortened my stylesheet by 400 lines! The other benefit of organizing your styles like this is going to spill into the next tip…

3. Get OCD with your code

Ok, I know that plenty of people are far less neurotic than me and they still get through the day just fine. No microwave fires, forgotten keys, lights left on, etc. But for THIS, it will really behoove you to take my advice and get UBER organized with your code. If, within your larger sections (header, footer, etc) your code is sub-organized, your future self and any other developer who has the pleasure of working with your code will thank you.

What I mean by this is that you should stick to the cascade when putting your styles in order, because it will not only make your code cleaner and easier to navigate, it can make troubleshooting a breeze. If you are styling a div called .sylvia, and then you’re styling the h3′s inside .sylvia, then the li’s in .sylvia, and then the a’s inside those, you’ll keep things simple and clean by ordering the styles like this:

.sylvia { font-family: Arial, Verdana, sans-serif; color: #555555; }
.sylvia h3 { font-weight: bold; color: #000000; }
.sylvia li { font-variant: small-caps; }
.sylvia li a { color: #ff0000; }

The first reason for this is obvious: look how pretty and lined up it all is, since I’ve got each code on one line as discussed in Tip #2! Also, a space above and below this chunk of code effectively organizes it as a sub-section within whatever main structural section I’m working in. But finally, and most importantly, it makes it super simple to get a visual of the inheritence of styles! Anything inside .sylvia is going to inherit .sylvia’s styles unless told otherwise. With your code flawlessly aligned and sectioned like this, you can just look down the list and see what’s inheriting what.

I hope all of you beginners out there looking to become Ninjas have found something useful in this post. Maybe even some old hands picked up an idea or two for cleaner code. If any other developers out there have any tips or tricks that you live and code by, don’t keep us in the dark! I’d love to absorb your knowledge, so don’t hesitate to drop it in the comments section for me.

Related posts: