Making CSS classes descriptive, or semantic, can help improve code maintainability by describing an elements purpose, rather than it’s presentational function.
People level this as a criticism against Bootstrap (and other CSS frameworks) - where column names are presentational rather than semantic. In other words, in a typical Bootstrap project the main content area might have a class name like
.col-md-8, which is not semantic.
Fortunately, Bootstrap makes it pretty easy to define semantic classes that apply the built-in presentational logic, by use of the
Sage - Example of Semantically Defining Classes
The Sage WordPress starter theme (a great starting point for WordPress projects) defines a
.main and a
.sidebar class out of the box.
The column widths for these elements can then be set in a
I’ve modified the Sage definition of
.sidebar to add an offset to the sidebar, using the additional Bootstrap mixin
I find the offset really good for user experience - constraining the main content area generally makes for greater readability, and the extra whitespace between content and sidebar can reduce the sensation of clutter.
comments powered by Disqus