Dev Ingredients
web development blog
Optimizing and organizing your CSS code
As how we semantically approach our HTML code for a better structured mark-up, that’s how we need to approach CSS as well.
Setting global and local styles.
You probably haven’t heard of ‘local styles’ because I pretty much named them now and I like to think of ‘local styles’ as those we set for certain regions in our HTML document, like a box model which we can reuse throughout our document, while thinking of ‘global styles’ as those we set for the entire document, like links, heading tags and so on.
Often we meet stylesheets that contain overly used CSS syntaxes within an HTML section, take the following example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Box model - Dev Ingredients</title>
<style type="text/css">
body {margin:0; padding: 0;}
ul, ul li, h3 { margin: 0; padding: 0; list-style-type: none; }
/* basic CSS box model */
#box1 {
background-color: #e7e7e7;
border: 1px solid #ccc;
float: left;
margin: 10px 0 0 10px;
padding: 10px;
width: 200px;
}
/* poorly coded and arranged CSS box model */
#box2 {
background-color: #e7e7e7;
border: 1px solid #ccc;
float: left;
margin: 10px 0 0 10px;
width: 220px;
}
#box2 h3 {
padding: 10px 0 0 10px;
}
#box2 p {
padding: 0 10px;
}
#box2 ul {
padding: 0 10px;
}
#box2 .submit {
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<div id="box1">
<h3>Box title</h3>
<p><strong>Announcement</strong></p>
<p>Welcome to my basic box model example! Don't cricize the primitive design, it's not what we're working on :)</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<br/>
<input type="submit" class="submit" name="subscribe" value="Subscribe!" />
</div>
<div id="box2">
<h3>Box title</h3>
<p><strong>Announcement</strong></p>
<p>Welcome to my basic box model example! Don't cricize the primitive design, it's not what we're working on :)</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<br/>
<input type="submit" class="submit" name="subscribe" value="Subscribe!" />
</div>
</body>
</html>
Above we have two simple and almost identical box models, what’s to notice is that the HTML elements from the second box are styled and aligned individually, thus recquiring extra styling and that’s just poor coding. Have you noticed the obvious difference? If within a container we need spacing between the border and the content, then adding padding to the container will result your content being automatically aligned, as shown in the first box model.
Styling a full HTML test page
Throughout the development of a website, it’s inevitable not to come across new html elements where we need to go back to our stylesheet to style them. Wouldn’t it help if the majorly used elements are already pre-styled in a way to match your current website’s design? It takes a little more effort at the beginning to style elements that you may not even use, or at least, might use later on.
I found this great strict xHTML test page at snipplr.com, here’s what it’s all about:
<h1>CSS Basic Elements</h1>
<p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>
<hr />
<h1 id="headings">Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h1 id="paragraph">Paragraph</h1>
<p><img src="http://farm3.static.flickr.com/2224/2208833842_5dfe63f367.jpg" alt="Brandon and the Boys" />Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<hr />
<h1 id="list_types">List Types</h1>
<h3>Definition List</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<hr />
<h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
<fieldset>
<legend>Legend</legend>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<form method="post" action="#">
<h2>Form Element</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
<p><label for="text_field">Text Field:</label><br />
<input type="text" id="text_field" name="text_field" /></p>
<p><label for="text_area">Text Area:</label><br />
<textarea id="text_area" name="textarea" rows="5" cols="20"></textarea></p>
<p><label for="select_element">Select Element:</label><br />
<select name="select_element" id="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select></p>
<p><label>Radio Buttons:</label><br />
<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
</p>
<p><label>Checkboxes:</label><br />
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
</p>
<p><label for="password">Password:</label><br />
<input type="password" class="password" id="password" name="password" />
</p>
<p><label for="file">File Input:</label><br />
<input type="file" class="file" id="file" name="file" />
</p>
<p>
<button>Submit</button> <button type="reset">Clear</button>
</p>
</form>
</fieldset>
<hr />
<h1 id="tables">Tables</h1>
<table>
<caption>Table Caption Goes Here</caption>
<thead>
<tr>
<th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th><th>Footer 2</th><th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>
<tr>
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>
</tbody>
</table>
<hr />
<h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Buttars Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Buttars Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></pre>
<blockquote>
<p>This stylesheet is going to help so freaking much.</p>
<p>-Blockquote</p>
</blockquote>
<!-- End of Sample Content -->
It’s all just HTML, styling it would give you a better overall view of your page’s design elements, helping you rapidly implement new content without worrying about the browser’s terrible default styling 
a fantastic time saver technique, I must say!
I’ve added some basic styles to give you an idea how I prefer starting the design of a web page:
background-color: #7b532c;
color: #FFF;
font-family: verdana, arial;
font-size: 12px;
line-height: 18px;
}
h1,h2,h3,h4,h5,h6,ul,ol,dl,a {
color: #ffcc99;
}
a:hover {
text-decoration: none;
}
hr {
border: 1px solid #3e240a;
}
img, fieldset, input:focus, textarea:focus, input:hover, textarea:hover {
border: 2px solid #3e240a;
}
sup, sub, cite, abbr, acronym {
border-bottom: 1px dashed #dec38f;
color: #ffcc99;
}
pre {
color: #ffcc99;
font-style: oblique;
}
legend {
color: #3e240a;
font-weight: bold;
text-transform: uppercase;
}
table {
background-color: #d7b695;
border: 1px solid #3e240a;
color: #3e240a;
}
table th {
background-color: #3e240a;
color: #d7b695;
padding: 5px;
}
table caption {
color: #d7b695;
font-weight: bold;
}
blockquote {
background-color: #d7b695;
border: 1px solid #3e240a;
color: #3e240a;
padding: 10px;
}
Bear in mind that in the above example I haven’t used the reset stylesheet to ensure browser compatibility, if you haven’t heard of it or do not know how to implement one, I’ve written an article about it a while back: Using the Reset Stylesheet
Organizing your CSS
When building more complex designs, you end up with a lot of heavy CSS blocks, and going back through your own code can be difficult at times, so how do you organize your code?
For starters, I sort all of my CSS syntaxes within a block aphabetically, because it may take a good few seconds to find every line of code if the code lines are all mixed and scrumbled, take the following css code block:
.className {
border: 1px solid green;
position: absolute;
font-size: 12px;
line-height: 16px;
text-decoration: none;
color: bold;
z-index: 100;
padding: 0 2px 0 2px;
float: left;
margin-top: 15px;
}
...
and the following alphabetically arranged css code block:
.className {
border: 1px solid green;
color: bold;
float: left;
font-size: 12px;
line-height: 16px;
margin-top: 15px;
padding: 0 2px 0 2px;
position: absolute;
text-decoration: none;
z-index: 100;
}
...
I think it’s pretty easy to realize which is better to get accustomed to, but then again, everyone has their own preferences.
What about the entire stylesheet organization? I personally keep it simple, I section my main stylesheet as the following:
@import ('url/style.css');
/* Global settings */
/* General styles which apply to the entire document and its descendants. */
/* Local and module styles here */
/* Content styles here */
/* Footer styles here */
If you feel I’ve missed some vital tips, go ahead and post them as comments!
Share This Post
Related Posts
15 Comments
Nov 4, 201011:33 PM
Indeed, that’s a must-do for more complex projects on the production server 
Thanks for the feedback!
Nov 11, 201010:23 AM
This is awesome! I know a little about CSS and HTML and it really helps if you keep it organize so you wouldn’t be confuse of the codes.
Nov 11, 20107:17 PM
Same with Virtual Server, I am still a beginner in CSS but I have extensive knowledge in HTML. I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression and how greatly it will affect performance. thanks
Nov 27, 20106:42 AM
Niche tips. Think that’s what WordPress did.
Nov 27, 20106:02 PM
Good post, I agree with your points. I usually work on the rule that if an external style sheet is larger than 15-20kb then it probably need to be looked at.
Ive used style resets before and they do work well but unless I’m totally stuck I tend not to use them as a rule. I guess it depends what sort of page your styling.
Tom
Nov 29, 201011:01 AM
The CSS file differs from project to project, pretty much about its design complexity, as for the RESET stylesheet, you can either use it or just implement it manually when you come across browser design incompatibilities. I personally use it all the time.
Sep 23, 20114:54 AM
Great tips dude! Thanks for sharing this blog.
Oct 20, 20119:25 PM
I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression and how greatly it will affect performance. Thanks for the details stopping by!
Oct 21, 20111:41 PM
Honestly I just got my eyes widened by all those codes up there as If I am decoding all the symbols LOL I am just a baby on this net world and it seems most of this are unfamiliar with me . Hope one of this days I can know things like this.
Oct 21, 20112:02 PM
Best of luck in finding your true passion
Nov 6, 20118:57 AM
. This greatly reduces the file size and has been found to be a functional solution.
Nov 9, 20118:08 PM
I am still a beginner in CSS but I have extensive knowledge in HTML. I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression. |
Nov 28, 201112:19 PM
I find it funny how @darknight0506 (comment 13) simply combined other peoples comments into his own.
“I am still a beginner in CSS but I have extensive knowledge in HTML.” from after the comma 1st sentence of comment 4
And.
“I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression.” from comment 9 – 1st two sentences…
…haha just thought I’d point that out.
Am I weird for noticing that?
Nov 28, 20111:50 PM
@Tom Garmin
wow, what a catch I did feel a deja vu when reading his comment but I didn’t really figure out out why haha
Let’s just call it a coincidence
Thanks for the outstanding observation!
« Web developer essential tools Next Post
Getting the right color scheme »
11:30 PM
You can simply use HTTP compression on your CSS at the server (apache) or file level (php’s gzip, for example). This greatly reduces the file size and has been found to be a functional solution.