Formatação de CSS

[rubenmarcus]

Bom, dei um search aqui , e vi que tem varios tópicos de CSS, mas não vi nenhum sobre formatação.
Imagino que no final minificam tudo, mas como preferem formatar o CSS source?

1 Linha?
multiplas linhas?

[felipefialho]

Abordo minhas preferencias de formatação do CSS no meu Coding Style 🍕

[rubenmarcus]

@lfeh tem algum impacto em performance, ou é apenas "estética" mesmo? o Brackets tem o beautify on save que eu uso, e deixa parecido com o seu Coding Style mas.. vi essa rule de 1 propriedade, 1 linha ele não deixa.

ex de um código que ele salvou aqui:

.checkout .opt .check {
margin-top: 11px;
}

[felipefialho]

No meu caso é só estética e padronização do código, já que no arquivo final passo diversos plugins para melhorar performance, como o combine-mediaqueries e o cssnano, então tudo vai ficar minificado.

[abnersajr]

Em diversas IDE's é usado quase sempre "portas" de um determinado plugin para estilizar o seu código e quase sempre tem opções para configurar. Basta dar uma pesquisada no nosso bom amigo google que tem algo.

Aquele código feio que num da pra ler e não é pra mecher direto nele (quase sempre né, mas quem nunca tava sem o dev e foi direto no min 😎 ) geralmente usa-se algum plugin para fazer a compactação, existe diversos com suas particularidades, seja ele pra gulp, grunt, direto para a IDE. Também com suas "settings"

Ai vai um link referente a minify: Benchmark 👍

[filipelinhares]

Eu costumo sempre usar o Stylelint com uma configuração.

Uso um plugin no editor que me avisa sempre que eu escrever fora do padrão.

As vezes coloco em uma npm task:

"scripts": {
  "lintcss": "stylelint" "**/*.css"
}

[neysimoes]

Sou xiita e acho que deve indentar sempre, nada de escrever em uma linha só pq tem 1 uma regra.

Essas essas configurações devem sempre estar presentes no .editorconfig para toda a equipe seguir o mesmo padrão.

[kazzkiq]

Eu sou da mesma filosofia do @neysimoes. Identação sempre! E concordo com basicamente tudo que ta no Coding Style do @lfeh (que é muito bom, por sinal!), minha única adição seria a maneira de formatar uma propriedade que possua múltiplos valores. Nestes casos eu geralmente separo cada valor em uma nova linha e deixo um espaço entre eles para ajudar na leitura do código. Exemplo:

.minha-classe {
    width: 100vw;
    padding: 1rem;

    background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.1)),
                linear-gradient(rgba(0, 50, 90, 0.2), rgba(0, 50, 90, 0.4));

    box-shadow: 0 3px 0 #f3f3f3,
                0 1px 0 #c3c3c3,
                1px 0 0 #fefefe;
}

Eu também não consigo prefiro não ordenar as propriedades por ordem alfabética porque da muito trabalho na hora de criar o código. Uso uma abordagem um pouco mais "solta": propriedades funcionais primeiro (medidas, posicionamento, etc), propriedades de estilização depois (cores, fonte, borda, etc).

[rubenmarcus]

@kazzkiq eu tambem. ordeno as propriedades assim. apesar de já ter lido que o recomendado é alfabeticamente (sempre coloco, background,width,height,padding,margin, primeiro de todas as outras.. ai border, e qualquer outra que vier)

Inclusive.. acho eu (suposição) que isso tem haver com ter uma cabeça mais voltada pro design do que pra código,veja que as primeiras propriedades que colocamos são as que tem haver com o design do elemento, eu particulamente, penso sempre no background primeiro kkkkkkkkk

Alguem sabe se existe algum plugin pra gulp, que rode e coloque em algum arquivo dinamico de css classes do tipo:

a lógica é o seguinte, eu queria colocar num elemento no html, uma classe estilo: width-22px , ai o gulp leria e colocaria esse classe com width no css.

Muitas vezes estamos em situações que alguns elementos mudam apenas algumas propriedades, e acredito que seria muito mais rápido declarar direto no html, do que: diferenciar no chrome dev tools, copiar e colar no css uma classe nova etc e etc...

e acredito que fazer com js no client, para performance seja ruim tambem

@abnersajr https://github.com/yui/ycssmin No Benchmark que você postou o YCssmin é o que mais minifica em todos. Eu uso o CSSNano hoje, compensa trocar então?