One of the biggest challenges we have when designing a complex site is structuring the CSS in a logic way, in order to make it efficient and let us reuse the code as much as possible.
Let’s see a way to try to accomplish this with some simple tips that let us save a lot of typing, and making the most out of our code at the same time.
Let’s suppose we have a site that we want to have with different styles depending on the section we are in.
Our demo site will have a simple heading, a main DIV, some colors, text and a link. This would be the code:
<?xml version="1.0" encoding="utf-8"?>
<!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>
<title>Structuring CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Hello world!</h1>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo ante, pharetra at, elementum sed, dictum molestie, leo. Etiam aliquet. Donec pharetra ligula sit amet dolor. In hac habitasse platea dictumst. Integer at erat ac magna molestie dapibus. Maecenas consectetuer, nunc sit amet malesuada bibendum, lacus diam condimentum nunc, rutrum ultrices nulla quam sed massa. Nulla facilisi. Quisque convallis molestie diam. Aenean auctor leo et sapien. Donec nisi. Aliquam mauris.<br />
<a href="second.html">To the next section</a>
</div>
</body>
</html>
We’ll call this page “first.html“. We’ll do a second page, identical to the first, wich we’ll call “second.html” where we’ll change the <h1> and the link:
<h1>Second page</h1>
and
<a href="first.html">To the previous section</a>
First thing we must take into account is the color palette we’re going to use. In this case I’m usign two palettes, one in blue and the other in orange.
In both cases the layout will be identical, just the colors will change.
First step will be to define the layout, without any color.
@charset "utf-8";body {
margin: 0;
padding: 2em;
font-size: 88%;
font-family: sans-serif;
}h1 {
font-size: 1.6em;
margin: 1em;
padding: 0;
}#main {
font-size: 1em;
margin: 0;
padding: 1em 2em;
width: 46em;
border-top: 1px dashed;
}
#main a {
text-decoration: underline;
font-weight: bold;
}
#main a:hover {
text-decoration: none;
}
We’ll call this stylesheet “styles.css“, we’ll put it inside a directory called “css” and we’ll call it from both pages, adding this line under the <title>
<style type="text/css">
@import url("css/styles.css");
</style>
As you’ll see, we have a layout without color. The reason I’m using the @import instead of the regular link is because in this way the stylesheet will degrade in older browsers (wich will show it without styles). Trying to make a new CSS display correctly on an old browser is, in my opinion, a waste of time.
Before going into the color stuff we must correct the errors of IE (version 6 and under). In #main I’ve defined a width of 46em plus a total padding of 4 (2+2), wich makes a total width of 50em. To make it look correct in IE we must change the total width value. So, we make another stylesheet called stylesie6.css and put the following code:
@charset "utf-8";#main {
width: 50em;
}
And add the new stylesheet in a conditional comment under the previous stylesheet, but outside the <style></style>, both in the first and second page:
<!--[if lte IE 6]>
<link href="css/stylesie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
If we wanted to make a specific layout for the first page we could add a new stylesheet with the additional styles. We’re going to miss this step though, to make the excercise simpler.
Now we only have the colors left.
In this case we’re going to follow a different logic. Instead of assigning properties (colors) to elements we’re going to assign elements to properties.
We’re going to define the same color for the H1 and the links. Then one color for the DIV background and one for the DIV border, and finally a color por the link hover state:
@charset "utf-8";h1, #main a {
color: #f90;
}#main a:hover {
color: #930;
}#main {
background: #fc9;
}
#main {
border-top-color: #f90;
}
You may be wondering why I’ve put the #main selector twice, instead of putting both styles inside one #main selector. As I’ve said, the idea is to assign one element per color property, and not the opposite. This is a simple demonstration, but in a more complex site we would probably have several elements per property. Adding an additional property would affect all the elements. The idea is to have the color property just one time. In that way to update or change the color would be an easy task and we’ll not be forced to do a find and replace throughout the document.
We’ll save this file as colors1.css and make a reference after the previous @import, but just on the first page:
<style type="text/css">
@import url("css/styles.css");
@import url("css/colors1.css");
</style>
And now we’re going to change the colors for the second page.
Save the colors1.css as colors2.css and change the colors accordingly:
@charset "utf-8";h1, #main a {
color: #33f;
}#main a:hover {
color: #009;
}#main {
background: #99f;
}
#main {
border-top-color: #33f;
}
Now it’s only a matter of adding the appropiate reference on the page:
<style type="text/css">
@import url("css/styles.css");
@import url("css/colors2.css");
</style>
And voilá!
Two pages with different colors but the same layout. As both share the same stylesheet, browsers will use the cached CSS for the second page, saving precious bandwidth. If you need to have differences in style between the pages, just make additional CSS with the “exceptions”, so both page will still share the common styles and you’ll take advantage of a common cached stylesheet.
And if you keep the logic of adding elements to properties the stylesheets will be shorter and easier to mantain because you won’t repeat properties.
I hope this method will help you make complex sites easier to mantain. This method is also ideal to skin websites.
See you.
Ultimos comentarios