Existe um padrão para organizar o CSS? Por exemplo:
.teste{font-family:"arial";font-size:18px;color:white}
ou
.teste{
font-family:"arial";
font-size:18px;
color:white
}
Qual a mais indicada?
Existe um padrão para organizar o CSS? Por exemplo:
.teste{font-family:"arial";font-size:18px;color:white}
ou
.teste{
font-family:"arial";
font-size:18px;
color:white
}
Qual a mais indicada?
Não existe uma regra estabelecida para a forma como os arquivos de CSS são indentados e/ou formatados. Cada programador tem o seu estilo o que torna as coisas difíceis quando falamos em padronizar.
Contudo, existe um consenso de que os mesmos devem ser facilmente interpretados pelo programador, ao mesmo tempo que devem estar otimizados para o melhor desempenho da página web onde são utilizados.
A coexistência destes dois ideais pode ser atingida da seguinte forma:
Arquivo de CSS devidamente indentado e comentado:
/* Lines
* ------------------------------ */
.line-service{
background-color:#A9A9A9;
height:1px;
width:240px;
position:absolute;
bottom:60px;
}
.diagonal-left{
left:-214px;
transform:rotate(142deg);
-moz-transform:rotate(142deg);
-webkit-transform:rotate(142deg);
-o-transform:rotate(142deg);
}
.diagonal-right{
right:-214px;
transform:rotate(38deg);
-moz-transform:rotate(38deg);
-webkit-transform:rotate(38deg);
-o-transform:rotate(38deg);
}
.vertical-center{
height:168px;
width:1px;
left:50%;
bottom:-13px;
}
Para efeitos de exemplificação, vou utilizar código em PHP de forma a servir o CSS para um website:
<?php
header('Content-type: text/css');
// define o buffer para a função "compress"
ob_start("compress");
function compress($buffer) {
/* remove comentários */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
$cssFiles = realpath(dirname(__FILE__)).'/*.css';
foreach(glob($cssFiles) as $file) {
include($file);
}
ob_end_flush();
?>
A ideia é ter os arquivos "normalmente", ou seja, da forma com que mais nos relacionamos para os ler.
A linguagem que está a servir o website para o navegador é quem fica encarregue de otimizar o ficheiro e servir o mesmo o mais otimizado possível.
Com o código de PHP em cima apresentado o ficheiro é servido da seguinte forma:
.line-service{background-color:#A9A9A9;height:1px;width:240px;position:absolute;bottom:60px;}.diagonal-left{left:-214px;transform:rotate(142deg);-moz-transform:rotate(142deg);-webkit-transform:rotate(142deg);-o-transform:rotate(142deg);}.diagonal-right{right:-214px;transform:rotate(38deg);-moz-transform:rotate(38deg);-webkit-transform:rotate(38deg);-o-transform:rotate(38deg);}.vertical-center{height:168px;width:1px;left:50%;bottom:-13px;}
Tal e qual como pretendemos, sem espaços, sem tabulações, sem comentários...
Para o exemplo prático, o ficheiro css.php
que contém o código PHP em cima apresentado está dentro da pasta onde estão todos os ficheiros CSS que pretendemos servir ao website.
No HTML, ao invés de chamarmos cada um dos ficheiros de CSS, chamamos apenas o ficheiro PHP, ficando o mesmo responsável por ler todos os CSSs e enviar os mesmos devidamente otimizados:
<link href="http://www.meusite.com/caminho/para/css.php" rel="stylesheet" type="text/css">
Não, não há um padrão.
O que deve ser considerado é: por exemplo, na hora do desenvolvimento, muitos autores preferem deixar tudo separado para facilitar a localização das partes de interesse para manutenção, como no exemplo abaixo:
div {
position: absolute;
top: 0;
right: 0;
font-family: arial;
color: red;
line-spacing: 20px;
}
Outros preferem separar linhas por assuntos, como no exemplo abaixo (posicao, aparencia, etc):
div {
position: absolute; top: 0; right: 0;
font-family: arial; color: red;
line-spacing: 20px;
}
Se a pessoa tem uma consciência do que está fazendo, nada impede de deixar tudo em uma linha só, ou usar misto:
body,html { margin:0; padding:0 }
div {
position: absolute; top: 0; right: 0;
font-family: arial; color: red; line-spacing: 20px;
}
ou seja, é questão de gosto pessoal, ou padrão para trabalho em equipe, ou política da empresa, isso se for o caso.
Por outro lado, existem os processadores de CSS que compactam o código, o que pode se traduzir em uma imensa economia de dinheiro, dada a menor banda que você precisa utilizar ao evitar transporte desnecessário de espaços, quebras de linha e tabulações. Pode parecer bobeira quando o site serve meia dúzia de páginas por dia, mas imagine o CSS de grandes sites, como sistemas de busca e redes sociais.
Vale lembrar que muitas vezes compensa testar se a minificação do CSS é realmente vantajosa, pois em muitas ocasiões basta configurar o servidor (seja Apache, NGINX, IIS, etc) a usar GZIP, o que já reduz o código imensamente, muitas vezes valendo mais a pena do que processamento extra sobre o CSS (a não ser que você faça algum cache local do resultado).
Concordo com o Jorge B., ao meu ver, é questão de preferência. Creio que faça diferença quando a quantidade de CSS customizado é grande e está no mesmo arquivo que o código da página(o que não acho muito recomendado, e sim um arquivo à parte), pois pode gerar uma maior dificuldade para localizar/navegar o conteúdo como um todo.
Não existe um padrão. As duas formas são questão de gosto. De acordo com minha percepção a segunda é preferida pela maioria porque parece mais limpo, mais legível. Alguns acham que a primeira deixa o código mais curto. Mas tudo isto é questionável, é questão de gosto.
Pronto. É só isto.
Na verdade quando eu termino de desenvolver o CSS
, eu faço uma compactação do arquivo CSS
para fins de otimização do site ou sistema ou o que quer que seja. Para tal uso este site, de passagem uma ferramenta excelente para compressão de folhas de estilo.
Na verdade, ao contrário do que as outras respostas informaram, existe sim um padrão, estabelecido pelo Google, que você encontra no Google Style Guide.
Lá você encontrará, entre outras regras, a seguinte:
Selector and Declaration Separation
Separate selectors and declarations by new lines.
Always start a new line for each selector and declaration.
/* Not recommended */ a:focus, a:active { position: relative; top: 1px; } /* Recommended */ h1, h2, h3 { font-weight: normal; line-height: 1.2; }
Ou seja, é sim recomendado separar seletores e declarações por quebra de linha.
Gosto de organizar meu css com pre-processadores, eu utilizo o SASS
http://sass-lang.com, também utilizo uma metodologia chamada de SMACSS https://smacss.com/ onde ensina como fazer uma arquitetura de css modular.
Utilize da segunda forma enquanto estiver produzindo o código, por conta da Indentação se torna mais fácil de se entender, ao terminar a produção do mesmo, utilize um "CSS Minifier" que fará com que o código fique mais ou menos igual a primeira forma, fazendo com que o arquivo fique menor.
Eu quando programo em CSS utilizo sempre uma syntax diferente pelo facto de ter melhor conhecimento do código e fácil acesso.
.menu
{
color: #FFF;
text-align: left;
}
É mais fácil aceder ao código caso haja alguma falha por exemplo alterar a cor.
A segunda opção é a "mais legível", porém ambas funcionam do mesmo jeito. Trata-se apenas de identação (a segunda opção esta identada e a primeira não).