CSS RUB Compressing and Organizing
Hi everyone today I wanted to take some time and introduce to you a new technique I have come up with that helps me out in both CSS file size but also organization. This technique of mine has been dubbed RUB which stands for (Repeating Unique Behaviors). CSS RUB is taking a style sheet and breaking it down into logical categories that reveals common or rather repeated styles much faster while also helping organize. It’s also debated if its give a proper hierarchy over your styles to cut down on style rule conflicts.
So to begin lets take a look at a sample demo site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RUB Demonstration Site</title>
<style type="text/css">
body {margin:0px; padding:0px; text-align:center;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {float:left; width:100%; border-bottom:1px #000 solid;}
#header h1 {margin:0px; padding:0px;}
#nav {margin:0px; padding:0px; float:left; display:block; width:100%; height:30px; font-size:12px;}
#nav li {float:left; display:block; height:30px; position:relative; list-style:none; list-style-type:none; padding:0px 10px 0px 10px;}
#nav li a {display:block; float:left; height:30px; color:#000; text-align:center; padding:0px 10px 0px 10px; line-height:30px; text-decoration:none;}
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li ul {display:none;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; border:1px #000 solid; top:28px; position:absolute; width:130px;}
#nav li li { margin:0px; padding:0px; background:#000; width:100%; float:left;}
#nav li li a {margin:0px; padding:0px; color:#fff; text-align:left; text-indent:15px; display:block; height:30px; width:100%;}
#nav li li a:hover {background:#fff; color:#000;}
#middle {float:left; width:100%;}
#leftCol {width:250px; float:left; padding-top:10px;}
#leftCol h2 {margin:0px; padding:0px; text-indent:10px;}
#leftCol p {margin:0px; padding:30px; display:block;}
#rightCol {width:499px; float:left; padding-top:10px; border-left:1px #000 solid;}
#rightCol h2 {margin:0px; padding:0px; text-indent:10px;}
#rightCol p {margin:0px; padding:30px; display:block;}
#footer {float:left; width:100%;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This is our site</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contact 1</a></li>
<li><a href="#">Contact 2</a></li>
<li><a href="#">Contact 3</a></li>
</ul>
</li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div id="middle">
<div id="leftCol">
<h2>Left Column</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
</p>
<h2>Left Column</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
</p>
</div>
<div id="rightCol">
<h2>Right Column</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<h2>Right Column</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="footer">
<h3>This is our footer</h3>
</div>
</div>
</body>
</html>
Now lets take a look at our demo site:
We have a header, middle content area and footer. Our header has a navigation menu with sub menu and some behaviors. Our middle content areas have a left and right column with header tags and paragraph tags.
So lets take a look at the CSS that makes this simple layout.
body {margin:0px; padding:0px; text-align:center;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {float:left; width:100%; border-bottom:1px #000 solid;}
#header h1 {margin:0px; padding:0px;}
#nav {margin:0px; padding:0px; float:left; display:block; width:100%; height:30px; font-size:12px;}
#nav li {float:left; display:block; height:30px; position:relative; list-style:none; list-style-type:none; padding:0px 10px 0px 10px;}
#nav li a {display:block; float:left; height:30px; color:#000; text-align:center; padding:0px 10px 0px 10px; line-height:30px; text-decoration:none;}
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li ul {display:none;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; border:1px #000 solid; top:28px; position:absolute; width:130px;}
#nav li li { margin:0px; padding:0px; background:#000; width:100%; float:left;}
#nav li li a {margin:0px; padding:0px; color:#fff; text-align:left; text-indent:15px; display:block; height:30px; width:100%;}
#nav li li a:hover {background:#fff; color:#000;}
#middle {float:left; width:100%;}
#leftCol {width:250px; float:left; padding-top:10px;}
#leftCol h2 {margin:0px; padding:0px; text-indent:10px;}
#leftCol p {margin:0px; padding:30px; display:block;}
#rightCol {width:499px; float:left; padding-top:10px; border-left:1px #000 solid;}
#rightCol h2 {margin:0px; padding:0px; text-indent:10px;}
#rightCol p {margin:0px; padding:30px; display:block;}
#footer {float:left; width:100%;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
Lots of times when developing a web site or at least a layout you first and only concerns are to basically get the structure and look and feel in place and making sure everything is cross browser friendly. But lots of times this hasty CSS coding leaves us with repeated style that could be summed up into shorter rules.
So a lot of our time is spent cleaning up our design even though we should be been doing it right in the first place. So whats a person to do to even being to tackle a CSS clean up? Simple this is where the RUB methos works its magic. Lets create three area in our style sheet:
/*Repeating*/ /*Unique*/ /*Behavior*/
With these three areas defined we can begin to think taking our CSS mess and categorizing our styles into one of the three areas. Lets talk about what would calcify a style to belong to any one of these three areas.
Repeating
Repeating is for styles that are made to cascade over more than one element, but is not limited to just classes. h3{style}, #rightCol h3 {} or even .cols would all be repeating styles and would be listed here.
Unique
Unique is for rules that are for specific elements only and wont be cascading over any other elements and are limited to only id style rules.
#nav, #header, #content, are all examples of a unique style rule.
Behavior
Behavior is for rules that utilize such pseudo CSS as :hover, :active, :link.
Remember this, keep it close… it is your weapon in the first steps to sorting out all this CSS mess.
After sifting through this our example CSS I have come up with the following.
/*Repeatin*/
#nav li {float:left; display:block; height:30px; position:relative; list-style:none; list-style-type:none; padding:0px 10px 0px 10px;}
#nav li a {display:block; float:left; height:30px; color:#000; text-align:center; padding:0px 10px 0px 10px; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { margin:0px; padding:0px; background:#000; width:100%; float:left;}
#nav li li a {margin:0px; padding:0px; color:#fff; text-align:left; text-indent:15px; display:block; height:30px; width:100%;}
#leftCol h2 {margin:0px; padding:0px; text-indent:10px;}
#leftCol p {margin:0px; padding:30px; display:block;}
#rightCol h2 {margin:0px; padding:0px; text-indent:10px;}
#rightCol p {margin:0px; padding:30px; display:block;}
/*Uniqure*/
body {margin:0px; padding:0px; text-align:center;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {float:left; width:100%; border-bottom:1px #000 solid;}
#header h1 {margin:0px; padding:0px;}
#nav {margin:0px; padding:0px; float:left; display:block; width:100%; height:30px; font-size:12px;}
#middle {float:left; width:100%;}
#leftCol {width:250px; float:left; padding-top:10px;}
#rightCol {width:499px; float:left; padding-top:10px; border-left:1px #000 solid;}
#footer {float:left; width:100%;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
/*Behaviour*/
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; border:1px #000 solid; top:28px; position:absolute; width:130px;}
#nav li li a:hover {background:#fff; color:#000;}
Sometimes when you are sorting your styles you will be faced with a rule like #header h1, and you have to decide, will I ever have another h1 tag in my header.. most likely not so its safe to call it a unique rule you see.
Now that we have broken our style sheet up into these three areas we are really setup up to start trimming down the code of repeated styles with classes and grouped CSS rules. Let start to optimize this code one group at a time.
Repeating
Your first step here would to be to sum up the repeated rules and styles of the leftCol header and paragraph tags as well as the rightCol and its header and paragraphs like so:
#leftCol h2,#rightCol h2 { text-indent:10px;}
.cols,.cols p,.cols h2 {margin:0px;}
.cols p {padding:30px; display:block;}
.cols h2 {padding:0px;}
Now lets try to clean up the navigation portion to the layout, here:
#nav li { position:relative; list-style:none; list-style-type:none;}
#nav li a {color:#000; text-align:center; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { background:#000; width:100%; border:1px #000 solid;}
#nav li li a {color:#fff; text-align:left; text-indent:15px; width:100%;}
.floatBlock, .floatBlock li, .floatBlock li a, .floatBlock li li, .floatBlock li li a {float:left; display:block; height:30px;}
#nav li li a, #nav li li {margin:0px; padding:0px;}
#nav li, #nav li a { padding:0px 10px 0px 10px;}
Unique
Moving onto the next portion the Unique category of our RUB method here is what I came up with:
body {text-align:center;}
#nav {float:left; height:30px; font-size:12px;}
body, #header h1, #nav {margin:0px; padding:0px; display:block; width:100%;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {border-bottom:1px #000 solid;}
#leftCol {width:250px;}
#rightCol {width:499px; border-left:1px #000 solid;}
#header,#middle,#footer{float:left; width:100%;}
#leftCol,#rightCol { float:left; padding-top:10px; padding-top:10px;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
Behavior
Our last group is for behavior is in most cases if a direct behavior call to a direct element so this is the least cleaned up portions of most style sheets.
Let compare our style sheets file size before and after now, here is our final result.
/*Repeating*/
#nav li { position:relative; list-style:none; list-style-type:none;}
#nav li a {color:#000; text-align:center; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { background:#000; width:100%; border:1px #000 solid;}
#nav li li a {color:#fff; text-align:left; text-indent:15px; width:100%;}
.floatBlock, .floatBlock li, .floatBlock li a, .floatBlock li li, .floatBlock li li a {float:left; display:block; height:30px;}
#nav li li a, #nav li li {margin:0px; padding:0px;}
#nav li, #nav li a { padding:0px 10px 0px 10px;}
#leftCol h2,#rightCol h2 { text-indent:10px;}
.cols,.cols p,.cols h2 {margin:0px;}
.cols p {padding:30px; display:block;}
.cols h2 {padding:0px;}
/*Uniqure*/
body {text-align:center;}
#nav {float:left; height:30px; font-size:12px;}
body, #header h1, #nav {margin:0px; padding:0px; display:block; width:100%;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {border-bottom:1px #000 solid;}
#leftCol {width:250px;}
#rightCol {width:499px; border-left:1px #000 solid;}
#header,#middle,#footer{float:left; width:100%;}
#leftCol,#rightCol { float:left; padding-top:10px; padding-top:10px;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
/*Behaviour*/
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; top:28px; position:absolute; width:130px;}
#nav li li a:hover {background:#fff; color:#000;}
Our new cleaned up styles is almost 15b smaller but more importantly our browser will now spend less time over repeated style when downloading the style sheet and keeping it in the computers cache.
So to sum up the CSS RUB method. CSS RUB is a mechetti if you will to organize your style rules before any serious cleaning process takes place. It’s goal is to give us a better plan for attack when tryin to debug a werid layout issue by breaking our style into these three areas as well as cut down on the amount of time to trim down repeated styles.
CSS RUB = Quick way to RUB out repeated styles and organize your style rules accordingly, simple as that!
Thanks everyone!
Devin R. Olsen
Here is an example of the page before optimizing
Here is an example of the CSS RUB method at work on our demo site
my God, i thought you were going to chip in with some decisive insght at the end there, not leave it with