Se você deseja se tornar um especialista em CSS, não basta ser proficiente no uso de seletores CSS. Reside também no planejamento geral do trabalho, dominando o fluxo de trabalho e melhorando a manutenção e eficiência da folha de estilo. Neste artigo, Jina Bolton seleciona 10 técnicas de aplicação CSS de 12 designers importantes e as recomenda a todos.
Ultimamente, tenho procurado maneiras de criar folhas de estilo mais envolventes. Usando CSS podemos criar os sites maravilhosos que desejamos, e escrever CSS é um prazer por si só.
Como criar uma folha de estilos mais atraente? Quais recursos sua folha de estilo deve ter?
Há alguns meses, tive o prazer de participar da Web Vision Conference 2007 em Portland, Oregon, EUA. Para este evento, pesquisei 12 designers que fizeram contribuições notáveis para web design e desenvolvimento. Os resultados desta pesquisa, combinados com minha própria experiência profissional, me ajudaram a resumir um conjunto de bons métodos para criar lindas folhas de estilo.
01. Não deixe que o CSS tenha muitas tags
Vincular ou importar folhas de estilo pode parecer uma tarefa confusa. Mas quero enfatizar por que isso é tão importante. Tenho visto muitos desenvolvedores de sites terem documentos CSS organizados e organizados, mas lentamente, porque eles podem não ser capazes de atualizar rapidamente em um curto período de tempo ou simplesmente têm preguiça de gerenciá-los, as requintadas folhas de estilo criadas anteriormente estão perdidos.
Imagine que você está trabalhando em um site enorme que precisa publicar centenas de conteúdos. Como o tempo é limitado, você precisa fazer alterações ou atualizações rápidas aninhando ou organizando CSS. Ano após ano passa, e esse hábito continua, até que um dia você é avisado que o site vai ser totalmente redesenhado (mas o conteúdo continuará o mesmo) e você só tem uma semana para criá-lo (incluindo testes).
Normalmente, atualizar uma folha de estilos é um método muito simples. A menos que você faça alterações em áreas dispersas do site por um longo período. Você não pode ter uma compreensão geral da estrutura da folha de estilos do site. Então agora você tem duas opções: a. Organizar tudo e redesenhar dentro de um mês (boa sorte);
Não deixe seu trabalho ficar assim. Vincular ou importar sua folha de estilo não é uma questão casual. Crie uma folha de estilo limpa e organizada e mantenha-a lá, e você será mais feliz no trabalho.
Nota: Não adicione muita marcação à sua folha de estilo. Se você tentar criar uma nova folha de estilo toda vez que atualizar ou adicionar novo conteúdo, você definitivamente estará procurando problemas. Muitos links e folhas de estilo importadas dificultarão a eliminação de bugs e dificultarão a manutenção da sua folha de estilos. É compreensível que sites maiores criem folhas de estilo separadas para partes diferentes. Apenas tome cuidado para não ir muito longe.
Vale ressaltar que adicionar muitas folhas de estilo aumentará mais solicitações http, o que também pode afetar o trabalho subsequente. Além disso, o navegador Microsoft IE6 tem certas restrições na folha de estilos de 32 conexões. .
02. Semântica não é apenas uma palavra da indústria
Você sabe, devo mencionar isso, a semântica será sua boa amiga. Além de escolher os elementos mais apropriados e significativos para expressar seu conteúdo, você também deve escolher os valores dos atributos de classe e id. Fora do seu trabalho, isso tornará a sua vida mais simples (e também tornará a vida da sua equipe de trabalho mais simples - se você trabalhar em equipe). Dê uma olhada na definição abaixo:
.l13k { cor: #369;
Se você acabasse de chegar ao trabalho e visse essa classe neste arquivo css, você a encontraria imediatamente? Provavelmente não é possível, porque o nome desta classe é provavelmente uma abreviatura, então não há uma maneira precisa de saber isso imediatamente. Ou talvez você tenha colocado isso aí e saiba o que significa hoje, mas pode garantir que ainda saberá o que significa muitos anos depois?
Agora, vejamos esta definição:
.azul esquerdo { cor: #369 };
Você provavelmente saberá imediatamente o que esse seletor de classe faz, assim como sabe que o módulo azul na coluna da esquerda está lá, o que significa que funciona. Mencionei anteriormente que você pode precisar redesenhar dentro de uma semana. Durante o redesenho, este módulo foi colocado à direita e ainda estava vermelho. Esta classe não tem mais o valor de existir. Então agora tenho que escolher: alterar todos os valores dos atributos ou deixá-los como estão. (Isso pode levar a mais confusão.)
É melhor não adicionar dimensões de cor ou comprimento e largura aos atributos de sua classe. Você deve evitar quaisquer valores de propriedade que sejam palavras literais. Atributos diretos (como caixa) podem levar à separação do conteúdo.
Finalmente, vejamos uma convenção de nomenclatura mais apropriada:
.descrição do produto {cor: #369};
Aqui você pode ver. A descrição do produto definida neste estilo é muito clara, não importa como você a altere.
03.Benefícios de adicionar comentários
Se seus comentários estiverem bem organizados e dentro do escopo do CSS, rotule cada seção de forma clara. É melhor garantir que os comentários sejam visualmente proeminentes para que possam ser localizados rapidamente quando o conteúdo for rolado e visualizado em dez linhas. Então, comentar em seu documento CSS será de grande ajuda para você ou outras pessoas no desenvolvimento futuro. A maioria dos comentários básicos irá sugerir por que esta regra é usada aqui.
Dicas e notas
Adicionar comentários pode ajudar você ou futuros desenvolvedores a evitar confusões desnecessárias. Mantenha esse hábito. Veja exemplo:
/* Desativa as bordas das imagens vinculadas */
img { borda: 0;
Hora e assinatura
Alguns designers e desenvolvedores gostam de indicar a data e hora da última atualização de um documento CSS, juntamente com seu nome e estado inicial. Essas informações podem fornecer informações sobre quem estava envolvido, bem como uma dica sobre qual é a documentação mais recente.
/* Estilos de tipografia Sushimonster
Atualizado: quinta-feira, 18.10.07 às 17h15
Autora: Jina Bolton
-------------------------------------------------- --*/
Esta é uma boa ideia, especialmente se você trabalha em equipe, tenha em mente que algumas equipes precisam omitir essas informações (algumas empresas preferem não ter esses nomes e datas no documento). olha. Essa informação é necessária?
Classificação da organização
É uma boa ideia usar comentários para descrever brevemente várias partes do seu CSS. Por exemplo, se todos os tipos de títulos estiverem agrupados, você precisará examiná-los para distingui-los.
/* CABEÇALHO
-------------------------------------------------- --*/
Detalharei isso mais tarde, quando discutir "diferenciação entre tipos".
Marcação de anotação
Se o seu documento CSS organiza estilos dispersos como eu disse acima, a marcação de comentários pode ajudá-lo a facilitar quando você deseja encontrar aquela parte do arquivo. Você pode usar símbolos de recursos, palavras-chave e encontrar o resultado final.
/* =CABEÇALHO
-------------------------------------------------- --*/
Isso é útil em folhas de estilo longas e complexas. Você pode ler sobre isso em Stop Design. .
consulte