CSS class "macro" - css

Question

I am a web front-end developer (newbie).
Hypothetically, if I am writing code for a web page using Twitter Bootstrap and want a responsive sidebar, I can do something like this:
<div class="col-xs-12 col-md-3">...</div>
Let's say, in the interest of separation of concerns, I would like the design people to decide how many columns wide the sidebar should be on each screen width.
Wouldn't it be better to do something like this:
<div class="sidebar">...</div>
and have the designer do something like this:
sidebar = col-xs-12 col-md-3
somewhere in the CSS?
Is this possible? Are there tools that will allow this? Am I way off base?

Answer 1

This is possible, with some help from a CSS preprocessor like the following:
Sass
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
Less
.sidebar {
&:extend(.col-xs-12);
&:extend(.col-md-3);
}
Hope this helps!

Answer 2

You should use a preprocesor to compile your CSS, and create semantic class from unit classes.
For example in Sass:
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
You can download Bootstrap in Sass on the offical website.
You can read the article "Using Sass To Semantically #extend Bootstrap", it can help you achieve what you want.

Answer 3

You propose instead of determining it in the html with a class on div like this:
<div class="col-xs-12 col-md-3">...</div>
determine it in the css with something like this:
.sidebar {
width: 100%;
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 50%;
}
#media (min-width: $screen-md-min) {
width: 33%;
}
}
In any case you have to edit something: either html file or css file. Consider your project, to know which one is easier.
I would suggest to put columns into the html (it would be kind of default case)
<div class="sidebar col-xs-12 col-md-3">...</div>
and then, if needed, override it for specific pages in css with something like this:
.page-order .sidebar {
width: 33%;
}