1

I wonder when and how I need to classify my duplicated attributes. Consider for readable, code performance, disadvantages and advantages between structure. Let say I have two CSS code :

1st Code :

.a {
    text-align: center;
    font-size: 1em;
    background-color: red;
}

.b {
    text-align: center;
    font-size: 1em;
    background-color: green;
}

.c {
    text-align: center;
    font-size: 2em;
    background-color: blue;
}

.d {
    background-color: blue;
}

2nd Code :

.a,
.b,
.c {
    text-align: center;
}

.a,
.b {
    font-size: 1em;
}

.c,
.d {
    background-color: blue;
}

.a {
    background-color: red;
}

.a {
    background-color: green;
}

.c {
    font-size: 2em;
}

So which one is better guys, Thanks a lot before :)

user5436320
  • 133
  • 2
  • 17
  • 3
    This question is dependant of the person preferences, we can't give you a straight answer... For my case the first one is much more readable, instead of scrolling through tons of lines of CSS to find all the attributes of a "p"; I prefer to get everything at the same times in only one block. – Alexandre Beaudet Oct 12 '15 at 11:04

1 Answers1

1

Regarding readability and structure, in my opinion it depends on the complexity and organization of you application.

Common practice exists in order to organize your CSS code, this is specially useful when you are working in large application and with several developers involved.

BEM

Block, Element, Modifier – is a naming methodology. It is a smart way of naming your classes giving more meaning and readability.

More info here:

https://css-tricks.com/bem-101/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

SMACSS

Stands for Scalable and Modular Architecture for CSS, and is more a style guide for your CSS.

More info here:

https://smacss.com/

GibboK
  • 71,848
  • 143
  • 435
  • 658