Simple expansion of Bootstrap classes listed in HTML element within your class won't create equal style set in most cases (except very simple ones). For example notice how .panel-primary
and .panel-heading
are actually defined:
https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L227-L229 https://github.com/twbs/bootstrap/blob/v3.1.1/less/mixins.less#L405-L422 https://github.com/twbs/bootstrap/blob/v3.1.1/less/panels.less#L22
Just take a look at the CSS you get with your Less code, for example:
.newsItem {
.panel-primary;
}
results in:
.newsItem {
border-color: #428bca;
}
.newsItem > .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
// etc.
See? The core .panel-heading
properties are still within .newsItem > .panel-heading
ruleset and your .newsHeader
won't have them at all (the top level .panel-heading
class has only padding
and border
styles).
The main problem of the approach you try is that the most of Bootstrap styles are built around nesting elements and classes so turning it into a "one element = one class" CSS is somewhat complicated task. And the more complex your HTML is the more tricky your code becomes, so at certain point all that will be too tedious to bother at all (especially considering that not every Bootstrap class can be used as mixin).