Part One: Semantics
Semantics mark the difference between an expert coder and a talented amateur, while they can both make the same webpage you will find that the professional page has clearly indented code with a fluid style and clear progression from section to section, without semantics you get a jumble of indecipherable code that no one but the author can comprehend.
A large part of semantics is learning how to indent, this seperates areas of code and defines layers on which you can build. While you can make code like this:
|
Code:
|
html {padding: 0 0 0 2px;background: #dadada url(images/bg.gif) repeat-y center;text-align: center;font: 70% tahoma, arial, verdana, sans-serif;color: #000;} |
That is not useful at all to someone trying to understand the code, by laying it out like this:
|
Code:
|
html {
padding: 0 0 0 2px;
background: #dadada url(images/bg.gif) repeat-y center;
text-align: center;
font: 70% tahoma, arial, verdana, sans-serif;
color: #000;
} |
The second method is far clearer to an observer, each attribute has its own line and is instantly recognisable and the element it is describing frames the lot never going on the same line to allow it to look like a box, a method that helps the viewer to comprehend the code no end.
The single '}' closing the element may seem a waste but in coding tems it is an elegant closer. When elements are placed together it leaves an almost empty line that makes the next element stand out to make it easier to identify the elements down the page.
In one way Semantics and Optimisation go hand in hand and that is in that the lines must be compacted into it's parents where there is more than one line of the same type, taking the same example this same code can be shown in two ways, the uncompacted:
|
Code:
|
html {
padding-left: 2px;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
background-color: #dadada;
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center;
font-size: 70%;
font-family: tahoma, arial, verdana, sans-serif;
color: #000;
} |
and the aforementioned compacted:
|
Code:
|
html {
padding: 0 0 0 2px;
background: #dadada url(images/bg.gif) repeat-y center;
text-align: center;
font: 70% tahoma, arial, verdana, sans-serif;
color: #000;
} |
The second of these is MUCH easier to read since the imformation for each CSS describer is on one line and can be more easily grouped and identified, if they are on seperate lines as they are in the first example a reader must read each line and then once they have found all the relevant ones piece them together, in the second this is done already.
On the optimisation side it also uses much less space, a whole stylesheet which is uncompacted can be two or three times larger just by a lack of semantics! Another common semantics mistake is the missuse of id="" and class="" some using one exclusively and some using both at inappropriate times. id="" (#div in the CSS) should ALWAYS be used if there is only one of that div, whereas class="" (div.div in the CSS) should ALWAYS be used if there is more than one of that CSS definition in the page. Where in doubt it is better to use class="" but in most cases you will already know which ones are to be used once only.
Headings are an important part of semantics, ALWAYS have h1 before h2 as you would anywhere else, the headers help to lay out the page and should be in a logical pattern to help readers follow the page.
Part Two: Optimisation
The other distinguishing mark of a professional is the ability to make a webpage with the least code possible, you can make a site with 200 divs and a huge CSS document, but often you can make the same layout with four or five divs and a tiny CSS document. This is the importance of OPTIMISATION, this means using only what you have to and nothing more. A good way to optimise is to find two elements with the same details for example these:
|
HTML Code:
|
div.topbox {
background: url(images/topbox.jpg) repeat-y;
width: 722px;
height: 6px;
}
#topbox_top {
background: url(images/top.jpg) no-repeat;
width: 722px;
height: 6px;
}
<div class="topbox">
<p>
Text
</p>
</div>
<div id="topbox_top">
<p>
Text
</p>
</div> |
Instead of having these as they are you can instead remove all but background from #topbox_top and instead have it as:
|
HTML Code:
|
div.topbox {
background: url(images/topbox.jpg) repeat-y;
width: 722px;
height: 6px;
}
#topbox_top {
background: #000;
}
<div class="topbox">
<p>
Text
</p>
</div>
<div class="topbox" id="topbox_top">
<p>
Text
</p>
</div> |
While in this case that only removes a few bytes in large CSS documents this can cut huge chunks off through clever use of overriding styles. Beyond this the best way to learn is to practice, learn from others and remember to validate your code always
Alex Elliott (
http://alex-elliott.com/)
