É assim que você iria estruturar sua folha de estilo CSS?

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

Pergunta

Deixando de lado a questão de saber se você deve servir de estilo simples ou múltiplos, supondo que você está enviando apenas um, o que você acha disto como uma estrutura básica?

/ * Estrutura * /

Qualquer coisa layout do modelo deve ser colocado em aqui, então cabeçalho, rodapé, corpo etc.

/ * Estrutura End * /

/ * Componentes comuns * /

elementos repetidos, como formulários de inscrição, listas, etc.

/ * Componentes comuns End * /

/ * Page específico 1 * /

Algumas páginas podem ter estilos específicos, que iria aqui.

/ * Específico Page 1 End * /

/ * Page específico 2 * /

Como acima

/ * Específico Page 2 End * /

/ * Page etc * /

Specific

E assim por diante.

/ * Específico Página etc End * /

Foi útil?

Solução

Isso é semelhante à forma como eu estruturar meu, no entanto, acho que o uso de subtítulos é a melhor maneira de fazê-lo, então eu uso essa estrutura:

/ ************************* * GLOBAL * ************************* /

/ * Todo o material comum vai aqui, sob os subtítulos apropriados * /

/ * Título formatação * /

/ * Texto formatação * /

/ * Formulário de formatação * /

/ * Tabela formatação * /

/ * etc * /

/ ************************* * Layout * ************************* /

/ * Todas as coisas de layout aqui sob subtítulos * /

/ * cabeçalho * /

/ * a barra lateral esquerda * /

/ * Direito Sidebar * /

/ * rodapé * /

/ ************************* * Navegação * ************************* /

/ * Eu coloquei navegação separado para o layout como pode haver um número de pontos de navegação sob seus subtítulos * /

/ * Main (horizontal) Navegação * /

/ * Navegação Esquerda * /

/ * Navegação Direita * /

/ * Breadcrumb Navigation * /

/ ************************* * FORMAS * ************************* /

/ * Qualquer forma de formatação que varia desde a formatação comum, se existem várias formas diferentemente formatados, em seguida, usar subtítulos * /

/ ************************* * Quadros * ************************* /

/ * Mesma coisa como formas * /

/ ************************* * LISTAS * ************************* /

/ * Mesma coisa como formulários e tabelas * /

/ ************************* * CONTEÚDO * ************************* /

/ * Qualquer formatação de páginas específicas, agrupadas por sub-rubricas para a página da mesma forma como formulários, tabelas e listas * /

específica

/ ************************* * Suporte CSS * ************************* /

/ * Esta é para qualquer especial formatação que pode ser aplicado a qualquer elemento em qualquer página e tê-lo substituir a formatação normal para esse item. Por exemplo, isso pode ter coisas como: * / 

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * etc * /

Espero que ajude.

Eu geralmente não recomendo escrevendo em uma única linha como essa, porém, ou como sugerido no link de Adam postado, eles ficam muito difícil para pular, se ficar muito tempo. Para os exemplos acima, foi apenas mais rápido digitá-los dessa forma, então eu não tive que recuar cada linha.

Para formatar Eu recomendaria esta estrutura: 

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

E assim por diante, eu coloquei a estrutura da classe ou ID no topo, então qualquer outra formatação, como a pia batismal etc abaixo disso. Torna muito rápida e clara para pular.

Outras dicas

O que quer que faça sentido para você é bom o suficiente. Francamente, quando alguém vem procurando algo em sua folha de estilo - ou quando vêm à procura de alguma coisa, para que o assunto - eles não vão tentar descobrir o que sua estrutura de organização era. Eles estão indo só para procurar qualquer classe ou elemento que precisa ver. Então, enquanto você geralmente manter o material que está relacionado juntos, e coisas seção off com comentários como @ Matt sugere, você está bem.

O fato da questão é que, mesmo com uma estrutura organizacional muito bem-pensamento para fora - assim como com um sistema de arquivamento-bem-pensamento para fora - não é sempre óbvio que vai para onde; assim que você é melhor fora apenas sendo um pouco sensível, não dedicando muito tempo para manter as coisas organizadas, e contando com ferramentas de busca para encontrar o que você precisa.

Eu organizo meu CSS de uma forma semelhante ao seu, mas eu começar com uma seção de reset. A idéia principal é ir do geral para o específico. Então aqui vai:

  • Redefinir
  • estrutura
  • html_tags
  • navegação
  • seções específicas
  • As mensagens de erro - que é minha última seção

A estrutura que você apresentou é exatamente o que eu uso. No entanto, parece-me que ainda tem muito complexa com novas regras aparecendo e substituindo uns aos outros ... Talvez eu deveria tentar furar a solução sugerida no tópico ligado a por Adam vez.

Parece que cada vez que eu criar um novo arquivo css, eu encontrar uma nova maneira de organizá-la. E todos eles são melhor do que o anterior.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top