HTML and CSS Reference
Another and perhaps better example is the 12-column grid system in
inuit.css. By default, the framework uses a 16-column grid, with
classes .grid-1 through .grid-16 for each size of column.
A problem arises, though, when you attempt to switch from the 16-column
system to the 12-column system. The .grid-15 class, for example, doesn't
exist in a 12-column layout; and even if it did, it would be too big.
What I did here was to make .grid-13 through .grid-16 use the exact
same properties as .grid-12 . So, if you switch from a 16-column layout to
a 12-column one, your .grid-13 through .grid-16 would't break it — they
would all just become .grid-12 s.
This means that developers can switch between them, and inuit.css will take
care of everything else.
Pre-empt the developer's next problem, and solve it for them.
A few people have mentioned that some of these practices lead to a bloated
CSS file. Bloat is where unnecessary code makes its way into a file, and your
comments should be anything but unnecessary. It will lead to a larger CSS
file, but not a bloated one.
If you are worried about increased file size then you should minify and gzip
your stylesheets, but this is best practice (particularly for highly tra ! cked