Quais são as melhores práticas para escrever CSS sustentável?

9

Estou apenas começando a explorar essa área e me pergunto quais são as melhores práticas quando se trata de produção de CSSes limpos, bem estruturados e de fácil manutenção.

Parece haver poucas abordagens diferentes para estruturar regras de CSS.

Um dos mais comuns que vi foi jogar tudo junto em uma regra, ou seja, margens, bordas, tipos de letra, planos de fundo, algo assim:

.my-class {
    border-top:1px solid #c9d7f1;
    font-size:1px;
    font-weight:normal;
    height:0;
    position:absolute;
    top:24px;
    width:100%;
}

Outra abordagem que notei foi o agrupamento de propriedades, por exemplo, propriedades relacionadas a texto como tamanho da fonte, tipo de letra, ênfase etc., entra em uma regra, fundos vão para outra, bordas / margens entram em outra:

.my-class {
    border-top:1px solid #c9d7f1;
}

.my-class {
    font-size:1px;
    font-weight:normal;
}

.my-class {
    height:0;
    top:24px;
    width:100%;
    position:absolute;
}

Eu acho que estou procurando uma bala de prata aqui que eu sei que não vou conseguir, aposte, no entanto - quais são as melhores práticas neste espaço?

    
por Art 11.01.2011 в 01:01
fonte

9 respostas

2

Eu usei uma ordem própria, conviniente para mim.

As regras foram listadas na ordem decrescente e o critério é o efeito da regra no layout. Por exemplo:

.element {
    float:none;
    position:relative;
    top:-2px;
    z-index:100;
    width:100px;
    height:100px;
    margin:10px 0;
    padding:0;
    border:1px solid #000;
    background:#F00;
    font-size:10px;
    color:#CCC;
}

Claro, no exemplo acima, não listei todas as instruções do CSS.

Uma ideia particular foi manter a ordem dos grupos, como:

  1. Posicionamento
  2. Largura e altura
  3. Margens e preenchimentos
  4. Bordas (e outras, afetando as dimensões totais do elemento)
  5. Planos de fundo, alinhamento (e outros, que não afetam o layout da página inteira)
  6. Tipografia
por Flack 11.01.2011 / 01:04
fonte
1

Normalmente, agrupo todas as propriedades que se aplicam ao mesmo elemento juntas - isso torna um pouco menos irritante tentar encontrar tudo o que se aplica e torna um pouco mais fácil evitar a duplicação de propriedades. Se eu tiver três regras diferentes de .my-class , não ficarei surpreso em um futuro não tão distante em encontrá-las todas estabelecendo alguma propriedade duas ou três vezes porque alguém foi apressado e apenas procurou o seletor mais próximo que parecia certo.

    
por cHao 11.01.2011 / 01:05
fonte
1

Se você estiver usando nomes de classe que provavelmente serão usados novamente em outro contexto com uma aparência completamente diferente, use "namespacing" para garantir que essas regras não "ultrapassem" o contexto pretendido. O contexto é o seletor para o elemento pai mais próximo, dentro do qual você sempre encontrará um elemento correspondente ao seu seletor sem namespaces.

por exemplo. Vamos imaginar que você esteja criando alguns estilos para um módulo reutilizável, cujo elemento de nível superior sempre tem o class="mymodule". Todos os seletores destinados apenas para uso devem então começar com ".mymodule" - então ".item" deve se tornar ".mymodule .item", títulos para seus itens de mymodule devem ter o seletor ".mymodule .item .title" etc .

Mas, não fique tentado a replicar toda a hierarquia de elementos exatamente em CSS - isso resulta em CSS muito frágil e de difícil manutenção. por exemplo. Se você acha que usará "item de produto" fora de "novos produtos", mas deseja preservar amplamente sua aparência, você certamente terá mais flexibilidade > não namespacing que (família de) seletor (es). Você sempre pode substituir seus estilos por outros seletores (de especificidade igual ou superior) para acomodar variações na aparência em outros contextos.

Exemplo:

%pr_e%

.article .title {    intensidade da fonte: Negrito; / * não afeta os títulos dos produtos * / }

    
por martyfmelb 11.01.2011 / 09:11
fonte
1

Eu gosto das sugestões de Stefano Mazzocchi no post intitulado Por que os programadores sugam CSS Design Entre outras coisas, ele explica como começar de uma forma limpa, se deve usar em ou px, como definir fontes, etc. Eu não usaria todas as sugestões (por exemplo, eu estaria hesitante em importar qualquer CSS - ou qualquer outro - - arquivos do Yahoo!), mas algumas ideias são muito boas.

E mais algumas sugestões: 100 dicas e truques de CSS extremamente úteis

    
por Alek Davis 11.01.2011 / 01:50
fonte
0

Pessoalmente, uso o primeiro método, mas também indoro seletores filhos. Por exemplo:

.my-class {
    /* stuff here */
}

    .my-class tr {
        /* stuff here */
    }

        .my-class tr a {
            /* stuff here */
        }

Não sei sobre as melhores práticas, além de colocar a chave de abertura na mesma linha que a de fechamento, e terminar cada propriedade com um ponto e vírgula, mesmo que seja a última.

    
por Daniel T. 11.01.2011 / 01:04
fonte
0

Não há realmente nenhuma resposta certa ou errada aqui, certamente nada definitivo. Faça o que fizer sentido para você e seja idealmente mais legível para os outros.

Pessoalmente, gosto de agrupar elementos relacionados, mas também os organizo pela seção em que estão localizados na página. Vou denotar estas seções com um comentário no CSS. Por exemplo, minha seção de cabeçalho pode ter esta aparência:

/* HEADER */

#header {
    float:left;
    width:100%;
    height:162px;
    background:url(images/headerbg.gif);
    background-repeat:no-repeat;
}

#header-left {
    float:left;
    margin:0;
    padding:0;
    width:350px;
}

#header-right {
    float:right;
    margin:0;
    padding:0;
    width:620px;
}

#header a {
    color:#c4e6f2;
    text-decoration:none;
}

#header a:hover {
    color:#ffffff;
}

Existem toneladas de diferentes práticas semânticas em torno do CSS, mas isso é apenas um exemplo de como eu geralmente agrupo minhas regras. Eu costumo tentar minimizar a quantidade de CSS necessária, então eu uso shorthands para bordas, margens, preenchimento, etc., e eu tento não reutilizar os seletores CSS. Eu agrupo todas as propriedades normalmente.

    
por Tyler Treat 11.01.2011 / 01:17
fonte
0

O CSS permite "colocar em cascata" várias regras em relação a um elemento em particular, mas geralmente você não tem regras que afetam exatamente os mesmos elementos, um após o outro. Em um bloco, vou separar tipos específicos de diretivas:

div.foo {
    float: left;
    padding: 1em;
    margin: 1em;

    background-color: #fff;
    border: solid 1px silver;

    font-family: ...
}

Meu pensamento também é que, para máxima legibilidade, você quer tornar cada diretiva o mais densa possível. Ou seja, o preenchimento aqui é mais fácil de ler do que a margem:

div.foo {
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
}
Tendo dito tudo isso, em geral, o problema com CSS não está mantendo pequenos blocos individuais limpos. Seu problema mais comum será, como você agrupa regras em arquivos e partes de arquivos?

Por exemplo, você pode ter um layout.css, theme.css (cores, fontes, etc.) e arquivos CSS individuais que afetam partes específicas de seu aplicativo, como o data-browser.css. Em seguida, você importa esses arquivos CSS de um arquivo CSS principal ou os importa em cada página, conforme necessário.

    
por Ken Kinder 11.01.2011 / 01:17
fonte
0

Para mim, é bom alfabetizar as propriedades do elemento. É simples, visível e bom para os olhos do programador:)

por exemplo,

#my-id 
{
   color: #fff;
   float: left;
   font-weight:
   height: 200px;
   margin: 0;
   padding: 0;
   width: 150px;
}

Antes da produção, é recomendado usar alguns do css compressores para proporcionar ganhos de desempenho.

    
por kajo 11.01.2011 / 01:34
fonte
0

Como na maioria das "melhores práticas", não há uma resposta correta aqui. Eu acho que as sugestões e estilos dos outros geralmente são bons.

Embora adore o CSS, acho que o CSS falhou a todos nós nesse sentido. A linguagem é obsoleta e poderia usar muitas melhorias para nos ajudar a organizar arquivos CSS grandes e complexos. Um bom esforço nessa direção é o link . Eles estenderam CSS com variáveis, mixins, regras aninhadas e até mesmo operações que permitem que o CSS seja muito mais seco e gerenciável.

Não é / true / CSS como você tem que pré-processar o LESS para transformá-lo em CSS que um navegador entenderia, mas que é um passo rápido e fácil que pode valer a pena para você se o seu CSS estiver ficando pesado.

Então, se você achar o CSS pesado, talvez valha a pena tentar.

    
por Scott Willeke 11.01.2011 / 01:55
fonte