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 make-x-column()
mixins.
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 _variables.scss
file.
OFFSET SIDEBAR
I’ve modified the Sage definition of .main
and .sidebar
to add an offset to the sidebar, using the additional Bootstrap mixin make-sm-column-offset()
.
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.
// Grid system
.main {
// No sidebar, `.main` is full width
@include make-sm-column($main-sm-columns);
// `.main` is contained by the `.sidebar-primary` parent class -
// this class is added to the <body> of pages that display the sidebar.
// If a sidebar displays, `.main` can take a reduced width.
.sidebar-primary & {
// `.main` is narrower by 2 columns, to give room for the offset
@include make-sm-column($main-sm-columns - $sidebar-sm-columns - 2 );
}
}
.sidebar {
// Set the width, then the offset, using Bootstrap mixins
@include make-sm-column($sidebar-sm-columns);
@include make-sm-column-offset(2);
}