kkamil4sz kkamil4sz - 1 year ago 53
CSS Question

Is it ok to override CSS property of class in the same stylesheet?

Just a simple question: Is something like this ok ?

for example:

#formbox textarea,
#formbox input,
#formbox select {
padding: 5px;
border-radius: 3px;
border: 1px solid #CCCCCC;
margin-bottom: 25px;
width: 220px;

#formbox select {
width: 232px;

#formbox textarea {
width: 300px;
margin-bottom: 0;

I assigned width and margin-bottom property for select and textarea twice, is it ok, or should i just separate #formbox textarea, #formbox input, #formbox select and copy&paste properties that are the same for them ?

Answer Source

In CSS declaration blocks with the same selector the last definition of a property is the only one applied.

The first width: 220px is 'useless' for a select/textarea (as it is overwritten by the same selectors below) - but it applies to input.

Choosing the approach shown, instead of a separate input { width: .. } is perfectly OK, coming down to preference.

(In the rules engine itself, it doesn't matter after the CSS is loaded.)