HTML and CSS Reference
In-Depth Information
The solution was to use a regex CSS attribute selector:
[class^="grid-"]{}
. This says, “Select any element whose class begins
with
.grid-
,” and it allows the developer's mark-up to now read as follows:
<div class="grid-4">
…
</div>
CSS attribute selectors may be less e
!
cient than, say, classes, but not to the
point that you'd ever notice it (unless you were working on a website with
massive tra
!
c, like Google). The benefits of making the mark-up leaner and
the developer's life easier far outweigh the performance costs.
Do the hard work once and reap the benefits later. Plus, get brownie points
from whoever picks up your project from you.
BE PRE-EMPTIVE, THINK ABOUT EDGE CASES
An example of being pre-emptive in inuit.css is the grid system. The grids
are meant to be used in a series of sibling columns that are all contained in
one parent, with a class of
5
.
This is their intended use. But what if someone wants a standalone grid?
That's not their intended use, but let's account for it should it happen.
Note:
inuit.css has changed since this was written, but the following is true
as of version 2.5.
