O código de gravação é fácil, a coisa difícil é escrever um código de qualidade que esteja limpo e arrumado. Para atingir esse objetivo, é necessária metodologia, que é adquirida com experiência. Normalmente, esse processo implica prática e muito tempo, resultando em muitas vezes esmagador. Felizmente, existem uma série de boas práticas que podem ser orientadas (especialmente quando estamos começando) e que me ajudei muito a começar.
Neste artigo, veremos 12 boas práticas de HTML e css muito fácil de aplicar e eles melhorarão a qualidade do nosso código.
link melhor que @import
para incluir chapas de estilo para o nosso HTML, é melhor usar tags de link que fornece a própria língua. Observe que quantas quantias mais folhas vão levar a página para carregar.
Use classes em vez de IDs
O id não contribui vantagem além disso, eles não podem (ou não devem) ser repetidos. Ao aplicar estilos aos nossos elementos, é melhor atribuir classes. Isso não significa que isso não seja usado, na verdade, eles são bastante úteis para o JavaScript, pois permitem o acesso a Dom Elements consumindo poucos recursos.
Em resumo, reserve os IDs para o seu JavaScript, e o resto Nomeie-o com classes Desta forma, você não terá que lembrar se você atribuir uma identificação ou classe, e você perderá menos tempo.
nomes de classe
Existem muitas formas e recomendações para nomear as classes . Pessoalmente, uso a nomenclatura do Bem, porque é muito auto-descritiva e é bastante padronizada.
Também é recomendado que as classes de status (que são aquelas que atribuímos com o JavaScript para manipular estilos em uma determinada situação ) Ter um nome semelhante, por exemplo: is-hide, is-show, , etc.
Evite declarar estilos on-line
Quando criamos o código HTML, temos que pensar que apenas a estrutura da página deve ser definida, não os estilos.
<span style="color: blue">Texto</span>Este código HTML declarou um estilo on-line, o que não só cria confusão a qualquer outra pessoa lendo o código, mas também sobrescreve a qualquer estilo atribuído pelo CSS . A coisa recomendável é atribuir uma classe e aplicar estilos no CSS.
No entanto, há ocasiões em que é útil declarar estilos on-line: quando os definimos via JavaScript (para criar efeitos de paralaxe, por exemplo, ) ou quando estamos escrevendo um item em um cms e queremos que um elemento tenha um estilo muito específico.
Sempre redefinir os estilos
Navegadores padrão adicionam margens e determinados estilos a Básico Etiquetas de HTML. O problema é que nem todos os navegadores aplicam os mesmos estilos, que às vezes podem descobrir nossos projetos. A solução é redefinida os estilos e, para isso, os mais conhecidos são normalizar ou redefinir. Qual escolher? A diferença entre esses dois é que a primeira é responsável por aplicar os estilos de base para que eles sejam os mesmos para todos os navegadores, enquanto o segundo elimina as margens de todos os elementos. Pessoalmente, eu geralmente prefiro o segundo, mas com uma pequena adição:
*, body * { box-sizing: border-box } o box-sizing É uma propriedade que altera o comportamento do navegador padrão quando as dimensões de um elemento são definidas. Um exemplo rápido: se atribuirmos um contêiner um width de 200px e, em seguida, adicionamos uma borda de 2px, esse contêiner ocupará . Estranho, certo? O que faz box-sizing: border-box é apenas isso por muita borda que adicionamos a você continua medindo 200px.
comentar CSS
Os idiomas de programação são projetados para entendê-los uma máquina, não o humano. Temos que pensar sobre o nosso futuro futuro ou outra pessoa que pode ler nosso código, por essa razão é sempre bom deixar comentários.
/* Esto es un comentario simple */Também é uma boa ideia entrar nas seções com comentários na forma de um bloco:
/*------------------------------------*\ HEADER STYLES\*------------------------------------*/o 0 Não possui uma unidade
Cada vez que um valor é zero, a coisa certa não é indicar nenhuma unidade. É incorreto usar 0px ou 0em.
Evite usar! Importante
Um bom controle da cachoeira é essencial para criar código limpo e ordenado. O que fazemos com !important é alterar a operação natural da cachoeira, um exemplo:
p { color: red !important;}. . .p { color: blue;}Neste código os parágrafos devem ter a cor azul, mas ter declarado um recolheria vermelho.É ilógico e faz o código que faz o código, portanto, temos que limitar seu uso como uma última opção.
seletores de grupo
Se tivermos o seguinte código:
h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}podemos sintetizá-lo para que seja menos redundante:
h1,h2 { font-weight: 800;}h1 { font-size: 2.5em;}h2 { font-size: 2em;}Desta forma, se um futuro querermos alterar a espessura da fonte, só teremos que modificar um valor.
Siga um guia de estilo CSS
CSS é uma linguagem não reimal, e que pode converter em um problema ao trabalhar como uma equipe ou seguir uma boa estrutura. É por isso que é melhor seguir um guia de estilos que unifies e façam todos os membros escreverem o código igual. Um dos mais conhecidos e com a melhor reputação é o guia de estilo que a Airbnb elaborou. Claro que há mais, e você sempre pode criar o seu próprio se você considerar oportuna. O objetivo final é que todo o código do aplicativo é uniforme.
Use pré-processadores, como Sass
hoje é essencial para usar um pré-processador ao trabalhar com folhas de estilos. Um dos mais populares, e que pessoalmente use é sass.
Os pré-processadores nos permitem ter muitas folhas de estilos que são então compilados em um, por isso não afeta o desempenho. Isso evita ter que lidar com uma folha monstruosa de estilos de milhares de linhas e nos economiza muito tempo. É por isso que é importante seguir uma boa estrutura e também um bom guia de estilo sass. Esta é a estrutura que eu costumo usar em meus projetos, extraídos do link anterior:
Estructura del proyecto└── scss ├── abstracts ├── _mixins.scss └── _var.scss // Declaración de variables de SASS o CSS ├── base ├── _base.scss // Estilos básicos que sobreescriben estilos de etiquetas HTML (sin clases) ├── _general.scss // Estilos básicos aplicados a clases de CSS └── _typography.scss // Estilos básicos de tipografía (familia, tamaños, grosor, etc.) ├── components // Aquí irían los estilos de algún componente en concreto ├── layout // Aquí irían los estilos de alguna sección que se repite en varias páginas ├── pages // Aquí irían los estilos de las diferentes páginas que componen el proyecto ├── themes // Aquí irían los estilos puramente estéticos (como colores) └── style.scss // Fichero principal donde importamos el resto de archivosTeste o desenho em vários navegadores
Teste Essencial O design pelo menos no Firefox, no cromo e na borda e nos dispositivos móveis pelo menos no cromo. Se você não temer por sua vida e quer ter um suporte completo, você pode tentar o Internet Explorer 11, embora em portas 2019 nada aconteceria por não dar suporte a você.