SCSS ainda é muito utilizado em 2024?
Olá a todos!
Estou trabalhando em um projeto da empresa na qual trabalho, que ainda está na fase inicial. Ele está sendo construído com NextJS, NestJS e OracleDB. No NextJS estamos utilizando TailwindCSS, porém acho extramamente ruim aquelas classnames enormes que o tailwind proporciona.
Eu estou pensando seriamente se ainda é interessante utilizar SCSS, visto que uma das coisas que me atrai muito nele, é o nesting dos seletores CSS.
Porém, ano passado se não me engano, o CSS ganhou o nesting utilizando o &, que deixou a forma de escrever o código muito atraente, não sendo mais necessário aquela repetição toda de código.
Quais são as outras vantagens que o SCSS pode proporcionar hoje em dia?
Pelo pouco que tenho de conhecimento, sei que o SCSS também tem um esquema de variáveis muito interessante, mas nao tenho certeza do quão útil isso pode vir a ser...
Código CSS antigo
.container {
color: red;
}
.container .child {
background-color: blue;
}
.container .child .grandchild {
font-size: 14px;
}
Código CSS novo
.container {
color: red;
& > .child {
background-color: blue;
& > .grandchild {
font-size: 14px;
}
}
}
Código SCSS
.container {
color: red;
.child {
background-color: blue;
.grandchild {
font-size: 14px;
}
}
}
Acho que deve haver uma ou outra empresa que utiliza, mas, honestamente, prefiro o Tailwind pela padronização, mesmo que fique aquele monte de classes. Isso pode ser mitigado se você tiver paciência para usar a diretiva @apply, mas, honestamente, não perco mais meu tempo escrevendo CSS há um tempinho. Kkkkk.
Cara eu parei de usar SCSS há muito tempo mas posso dar uma dica de tailwind, você pode criar uma arquivo separado de estilização normal e usar o @layer do tailwind para criar toda a estilização lá, sinceramente eu já usei assim e gostava deixava o componente mais limpo.
No meu trabalho estamos usando tailwind... sobre a quantidade de classes, estamos usando a lib tw-merge, passando um array de strings e segmentando grupos de classes em cada string +- assim:
merge([
'p-8 m-8',
'sm:p-10 sm:p-10',
'lg:etc...'
])
E você vai segmentando de acordo com sua necessidade como dark: ou hover: etc ...
Na minha opinião, o diferencial do SCSS pro CSS hoje em dia, é por ser uma linguagem compilada, permitindo que você use variáveis, array, foreach, if-else, etc... Com um pouco de criatividade, dá pra fazer umas coisas bacanas com o SCSS e criar muitas classes reutilizáveis e dinâmicas.
Mas eu particularmente prefiro o Tailwind, porque ele ja cria classes dinamicas de forma mais facil, o unico defeito é as classes ficarem sujas, mas com o @apply da pra consertar isso.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting é assim que eu escrevo meu css, é meio que um scss de forma nativa.
Legal saber desse avanço do CSS. Faz um tempão que não codo front-end pra valer. Vou tentar aplicar isso em alguns projetos.
eu ainda utilizo scss por causa da possibilidade de criar repetições entre algumas outras coisas.
ion-list ion-item {
margin-left: -16px;
}
$statusPedido: (
1: var(--status-color-pendente),
2: var(--status-color-aprovado),
3: var(--status-color-enviado),
4: var(--status-color-finalizado),
5: var(--status-color-cancelado),
6: var(--status-color-reembolsado),
);
@each $id_status, $color in map-remove($statusPedido) {
ion-item[statusPedido='#{$id_status}'] div {
border-radius: 10px 0 0 10px;
border-left: 5px solid $color;
padding: 8px 8px 8px 8px;
width: 100%;
}
}