The answer to this question is not just a matter of taste or project requirements but it’s a simple test for your technical skills and basic knowledge of the theory behind CSS.
Many web developers don’t have a firm knowledge of CSS and this problem comes into play when they have to customize the basic layout generated by a CSS framework in order to suit their needs.
As long as you merely apply classes to elements, the CSS theory is not relevant. But when you try to change even a single property value, then you should know how CSS works.
Take for example the base grid generated by Bootstrap. Do you know how it works? It’s simply the box model in action: a series of boxes whose width is calculated by taking an initial value as a reference.
Try it by yourself: given a width of 100%, how can you generate a grid system made of 12 different boxes?
Ok, I’ll give you an hint: 100 / 12 = 8.3333, that is, the width of the smallest box.
.col-xs-1 {
width: 8.33333333%;
}
Then you can calculate the remaining widths. But this is not enough.
We said theory and we said box model: you should also take horizontal spacing into account. In this case the horizontal spacing between boxes is created via padding:
.col-xs-1 {
padding-right: 15px;
padding-left: 15px;
}
If you want to change this, you need to know two key aspects of CSS: selectors and cascade. CSS3 provides us with advanced attribute selectors that can match also substrings within attribute’s values:
[class^="col-"] { ... }
By using this code, you can actually select all columns used by Bootstrap. Cascade (and specificity) kicks in when you simply insert your custom CSS file after the Bootstrap’s file: the following styles will override those defined by Bootstrap:
[class^="col-"] {
padding-right: 5px;
padding-left: 5px;
}
In other words, the answer of the fundamental question posed in this article can be formulated as follows: use a CSS framework only if you know exactly what you’re doing.
