Encapsulamento de classes CSS

[lciceris]

Fala pessoal, tive uma dúvida aqui de encapsulamento de css, pensei em 2 formas de fazer:

1-

<div class"component">
    <div class="title">
       <span class="span"></span>
    </div>
</div>

.component {
    .title {
        .span {
	}
    }
}

2-

<div class"component">
    <div class="component-title">
        <span class="component-title-span"></span>
    </div>
</div>

.component {
    &-title {
        &-span {
	}
    }
}

Qual seria a mais adequada de usar e pq ?

[mahenrique94]

Recomendo a segunda @lciceris, apenas adicionaria o padrão BEM, nesse caso, basta trocar o - por __.

[bizarro]

A segunda é bem melhor mesmo, como o @mahenrique94 disse. 😄 A especificidade da classe fica menor, aqui tem uma imagem desse artigo que é bem interessante sobre isso.

[luizbills]

Faça o possível para sempre usar apenas os Darth Maul.

[felipefialho]

@lciceris Existem algumas abordagens utilizando JavaScript que fazem esse papel de encapsulamento pra você. Entre elas, as mais famosas:

• styled-components
• jss
• css modules

Como todas as coisas do mundo, existe uma lista awesome maneira com comparativo entre as libs.

Sem nenhuma lib, existem diversas técnicas também. Você provavelmente deve conhecer algumas delas, mas entre todas acredito que o BEM é a que melhor funciona.

[didiraja]

@lhbzr incrível a didática dessa explicação com star wars 👏👏👏

[lciceris]

Valeu pessoal, todos os comentários deram um baita help aqui 😀

[pedrocss]

@lhbzr ótima imagem, mas fiquei com uma dúvida. No exemplo, que o @lciceris deu, a especificidade não seria a mesma? Acredito que em cada vai ser 3x class selector, "0,3,0 Sith Power", a única diferença é a convenção e/ou metodologia que está sendo usada para nomear as classes.

[klauskpm]

Eu indicaria usar o RSCSS. Você faria assim:

<div class"component">
    <div class="title">
        <span class="span"></span>
    </div>
</div>

.component {
    > .title {
        > .span {
	}
    }
}

O seletor > indica um filho direto, permitindo usar classes mais genéricas e sem tanto "barulho" no HTML.

[bernardodiasc]

Existe uma diferença importante pra ser considerada, como o @lhbzr comentou, a especificiadade.

.component {
    &-title {
        &-span {
	}
    }
}

result em :

.component-title-span {}

Enquanto

.component {
    .title {
        .span {
	}
    }
}

resulta em:

.component .title .span {}

Ou seja, 0010 vs 0030 respectivamente (https://specificity.keegan.st/). A segunda abordagem pode resultar em um CSS com efeito de cascata imprevisível, o que seria ruim pro projeto.

[kazzkiq]

Hoje em dia muitos frameworks já fazem encapsulamento a nível de componente, o que significa que as vezes nem faz sentido usar padrões mais complexos de nomenclatura no seu CSS, porque ele simplesmente não vai correr risco de entrar em conflito.

Se esse for seu caso (estiver usando um desses frameworks), acredito que possa continuar com o seu primeiro exemplo:

.component {
    .title {
        .span {
	}
    }
}

Caso você não use nenhum tipo de encapsulamento, eu particularmente recomendo o RSCSS assim como o @klauskpm explicou, pela simplicidade e limpeza que ele possibilita no código.

[pedrocss]

@bernardodiasc Obrigado pelo esclarecimento. Preciso estudar mais o Sass, não lembrava desse modificador "ampersand (&) character".