More Semantic CSS
Published May 23rd, 2013 by Geoffrey Rose
What do I mean by more semantic css?
We already are (hopefully) writing semantic HTML and CSS. Using semantic CSS classes and ids. These are great, but why stop there. Why use long meaningless percents when setting padding, magin, width, and so on. Why not use short, more meaningful percents.
Example
Semantic
div {
width: 93.5%;
padding: 0 3.25%;
}
Non-Semantic
div {
width: 92.32435234523%;
padding: 0 3.837823827385%;
}
Making a change
You decided that you need to add a bit more padding on the div.
Semantic Approach
You subtract .25% from the width. Then add .25% from the padding (.125% from left and right = .25%) to compensate for the increased width.
div {
width: 93.25;
padding: 3.375;
}
Non-Semantic Approach
Again, You want to subtract .25% from the width. But lets be real for a moment, it is more like .248951781%.
Hang on while I get the calculator out.
div {
width: 92.07540056423%;
padding: 3.962299717885%;
}
Letting go
One of the reason we make websites responsive is so it can be viewed on any device now and in the future. However by using long winded percents we are holding on to the pixel perfect layout of the past too much. Does that small faction of a percent really make or break the design of your site?
Calculator – Copy & Paste
No one likes having to use a calculator every time a percent needs to be changed. It quickly becomes tedious. When you change one of these, 99% of the time that involves changing at least one other value. Which means, at least two trips to the calculator to copy paste a percent that has nearly no meaning to anyone. This process is slow and prone to errors. But when using short easy to use percents, these can be changed with less thought and errors. This allows you to rapidity change and prototype designs that much faster.
We all know most of us are not mathematician, so why use long complicated decimals in the first place?
Past Articles
Found an error or have a suggestion?.