Meus pensamentos sobre estrutura CSS e módulos CSS sempre foram vagos e estou seguindo completamente a tendência. Os problemas que encontrei no trabalho recentemente me obrigaram a prestar atenção a esse assunto. Estou acostumado com uma pessoa fazendo tudo, planejando, projetando e publicando a página. Quando um projeto requer que várias pessoas colaborem e o concluam em um curto espaço de tempo, o planejamento dos arquivos de estilo, o pensamento dos módulos e estruturas CSS são particularmente importantes.
A seguinte questão tem me incomodado recentemente: Se várias pessoas estão trabalhando na recepção de um site ao mesmo tempo, como distribuí-las para que o estilo de todo o site seja unificado, a estrutura do arquivo de estilo seja razoável, existe sem duplicação e redundância, e a eficiência é a mais alta? Consultei vários colegas e as respostas que obtive são resumidas da seguinte forma: Em termos de unificação de estilo, discutimos juntos para fazer um esboço primeiro, e uma pessoa fez uma página de estilo padrão com base no esboço, e então começamos a trabalhar juntos, e o resto era modificação constante. Em termos de produção, vários arquivos CSS diferentes são definidos para todo o site, e cada pessoa é responsável por arquivos de estilos diferentes.
O que é fácil de dizer não é tão fácil depois de implementado. Quando se trata de design, ainda não me atrevo a correr riscos. Felizmente, não há muitas páginas. Existem menos de 20 páginas de primeiro e segundo nível no total, e uma pessoa pode cuidar disso. Conte-nos sobre o processo de produção.
(1) Padronize a nomenclatura CSS, a ordem de escrita e os comentários.
Sem mencionar a importância deste ponto, é difícil imaginar quão confuso seria se vários métodos de nomenclatura "fortemente personalizados" aparecessem em uma folha de estilo ao mesmo tempo. A nomenclatura pode usar a conexão do símbolo "-", "_" do meio, como caixa de texto, conteúdo de texto, caixa de texto ou escrita "caixa alta" em maiúsculas e minúsculas, caixa de texto, conteúdo de texto, etc. Os comentários são muito importantes. Os comentários podem ser divididos em três níveis. As principais categorias de comentários são usadas para dividir os blocos CSS, como cabeçalho, contêiner, anotações de rodapé, anotações de módulo local em categorias principais e anotações de terceira categoria. anotado em um seletor Use comentários ou hackeie comentários em alguns efeitos especiais. O formato de escrita pode usar recuo horizontal para mostrar relacionamentos hierárquicos.
(2) Determine a divisão da estrutura da folha de estilo com base nas renderizações
Existem muitas introduções na Internet sobre a divisão da estrutura de arquivos CSS, que geralmente são apenas alguns arquivos: layout.css/main.css/footer.css/header.css/reset.css, etc. eles são bons nisso e devem praticá-lo antes de serem implementados. Entenda que não existe o melhor, apenas o mais adequado. A melhor divisão de estilo deve depender intimamente da própria estrutura HTML, em vez de ser universal.
Além de facilitar a futura divisão de trabalho e colaboração, a distribuição de arquivos CSS também tem um ponto muito importante: se os bytes forem pequenos, eles podem ser compactados o máximo possível para reduzir o número de conexões simultâneas. grandes, eles podem ser divididos para evitar que a velocidade de download seja muito lenta e afete o carregamento do estilo. São questões específicas que precisam ser tratadas caso a caso. Por exemplo, para páginas muito visitadas, como mecanismos de pesquisa e páginas iniciais de portais, é melhor escrever CSS dentro da página.
Decida preliminarmente sobre a estrutura do estilo CSS:
Exemplo de código-fonte
reset.css /*Recarga de estilo de página*/
header.css /*Estilo de cabeçalho para todo o site*/
footer.css /*Estilo de rodapé completo do site*/
public.css /*Estilo de módulo público para todo o site*/
index.css /*Estilo único da página inicial*/
container.css /*Estilos de corpo de nível 2 e abaixo*/
print.css /*Estilo de impressão*/
ou seja.css /*IE hackear*/
(3) Divisão de trabalho e colaboração
O palco está montado e a cantoria começará. Encontre todas as listas de texto públicas e listas mistas de imagens e texto. Uma pessoa é responsável por escrever no módulo público, uma pessoa para o cabeçalho e o final e uma pessoa para o quadro da página secundária. A parte personalizada fica para o final.
Ainda existem muitos problemas na operação real. A redundância de código não pode ser evitada e só pode ser minimizada. Às vezes é preciso fazer sacrifícios para ser eficiente. O texto acima é apenas um pouco da minha experiência de trabalho. É também a primeira vez que exploramos verdadeiramente as vantagens da modularidade CSS: fácil de modificar, fácil de gerenciar e fácil para colaboração entre várias pessoas. Estou ansioso para discutir isso com os especialistas.