CODEWITHSUNDEEP
cssoocss
catandmouse
catandmouse

Reputation: 11829

Is it better to chain CSS classes or name them separately for modular purposes?

For example, which is better:

Method 1 (name classes separately):

/* CSS */

.textbox-red, 
.textbox-green {
   padding: 10px;
   border: 1px solid #CCC;
   border-radius: 10px;   
}

.textbox-red { color: #900; }
.textbox-green { color: #3c3; }

/*HTML*/

<div class="textbox-red"></div>
<div class="textbox-green"></div>

OR ------------

Method 2 (chain classes):

/* CSS */

.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.textbox.text-red { color: #900; }
.textbox.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

What is a better practice among the two?

Upvotes: 5

Views: 2967

Answers (4)

Matt Whitehead
Matt Whitehead

Reputation: 1811

I personally would go with method 2. That way you can swap out text-red or text-green easily for text-blue or text-yellow and still keep the underlying style for your text. Basically, method 2 allows for more flexibility and maintainability, IMHO.

Upvotes: 1

NielsInc
NielsInc

Reputation: 426

My opinion is that you should use modular css - You could also combine classes instead of linking them:

/*CSS*/
.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.text-red { color: #900; }
.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

That way you can reuse the red and green colors in cases when you want to have a red background without a textbox. This way you can re-use your code more and you have a loose coupling between your textbox and text-color

Upvotes: 5

Flauwekeul
Flauwekeul

Reputation: 1009

In my experience the modular approach gives you the most flexibility. The modular css pattern is also used in Twitter Bootstrap where flexibility is very important.

Upvotes: 0

Genson
Genson

Reputation: 117

First better if you making style for IE6, because this browser dont support second method.

Upvotes: -2

Related Questions