CODEWITHSUNDEEP
htmlcsssassless
gerky
gerky

Reputation: 6417

CSS duplicate rules best practice

Suppose I have html like this, and I use LESS:

<div class="one">
  <p class="a"></p>
  <p class="b"></p>
</div>
<div class="two">
  <p class="a"></p>
  <p class="c"></p>
</div>

And I want to style paragraph class "a" with color red, "b" with color blue and "c" with color yellow. So I have the following:

.one, .two {
  .a { color: red; }
  .b { color: blue; }
  .c { color: yellow; }
}

And I know that it can also be written as:

.one {
  .a { color: red; }
  .b { color: blue; }
}

.two {
  .a { color: red; }
  .c { color: yellow; }
}

I know my examples are a bit lacking, but my question is, what's the difference between the two? The second example is a bit longer but doesn't define rules where it shouldn't belong.

So my question is what is the disadvantage of placing rules that have no meaning to save some lines (like what I did on the first example)? Will it generate more rules, make it slower, etc..

Upvotes: 3

Views: 250

Answers (2)

Ant&#243;nio Regadas
Ant&#243;nio Regadas

Reputation: 724

Unless for styles hierarchy reasons, it's simpler to just write:

  .a { color: red; }
  .b { color: blue; }
  .c { color: yellow; }

Upvotes: 3

mishik
mishik

Reputation: 10003

Why not simple:

.a { color: red; }
.b { color: blue; }
.c { color: yellow; }

The difference between those two is that first one covers all six types:

.one .a, .one .b, .one .c, .two .a, .two .b, .two .c

While the second one only covers 4:

.one .a, .one .b, .two .a, .two .c

With respect to your markup - no difference at all, except that the very first case (without .one and .two) will be sliiiiiightly faster.

Also, see this.

Upvotes: 6

Related Questions