More Semantic CSS

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?