CSS code structures

Question

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 :)

Answer 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/