O código de escritura é doado, o difícil é escribir un código de calidade que está limpo e ordenado. Para acadar este obxectivo, é necesaria a metodoloxía, que se adquire con experiencia. Normalmente este proceso implica a práctica e moito tempo, resultando moitas veces abafador. Afortunadamente, hai unha serie de boas prácticas que poden estar orientadas (especialmente cando estamos empezando) e que me axudou moito a comezar.
Neste artigo, veremos 12 boas prácticas de HTML e CSS moi fácil de aplicar e mellorarán a calidade do noso código.
Link Mellor que @import
Para incluír follas de estilo ao noso HTML, é mellor usar etiquetas de ligazón que proporciona a propia lingua. Teña en conta que cantas máis follas son levar a páxina para cargar.
Clases de uso en vez de IDS
id Non contribúe Vantaxe máis aló de que non poden (ou non) repetir. Ao aplicar estilos aos nosos elementos, o mellor é asignar clases. Isto non significa que non se deben usar IDs, de feito, son moi útiles para JavaScript, xa que permiten o acceso aos elementos DOM que consumen poucos recursos.
En resumo, reserva os IDS para o seu JavaScript e o resto nomealo con clases Deste xeito, non terás que recordar se asignas unha identificación ou clase, e perderás menos tempo.
nomes de clase
Hai moitas formas e recomendacións para nomear as clases .. Personalmente uso a nomenclatura BEM, porque é moi auto-descriptiva e é bastante estandarizada.
Tamén se recomenda que as clases de estado (que son as que asignamos con JavaScript para manipular estilos nunha determinada situación ) ten un nome similar, por exemplo: is-hide, is-show, , etc.
Evite declarar estilos en liña
Cando creamos código HTML temos que pensar que só a estrutura da páxina ten que ser definida, non os estilos.
<span style="color: blue">Texto</span>Este código HTML declarou un estilo en liña que non só crea confusión a ningunha outra persoa que lea o código, senón que tamén sobrescribe a calquera estilo asignado por CSS .. A cousa recomendable é asignar unha clase e aplicar estilos no CSS.
Con todo, hai ocasións nas que é útil declarar estilos en liña: cando os definimos a través de JavaScript (para crear efectos de paralaxe por exemplo ) ou cando estamos escribindo un elemento nun CMS e queremos que un elemento teña un estilo moi específico.
Reinicie sempre os estilos
Os navegadores predeterminados engaden marxes e certos estilos para básicos Etiquetas de HTML. O problema é que non todos os navegadores apliquen os mesmos estilos, que ás veces poden descubrir os nosos deseños. A solución restablece os estilos e, para iso, os máis coñecidos son normalizados ou restablecidos. Que escoller? A diferenza entre estes dous é que a primeira é a responsable de aplicar os estilos de base para que sexan os mesmos para todos os navegadores mentres que o segundo elimina as marxes de todos os elementos. Personalmente, normalmente prefiro o segundo pero cunha pequena adición:
*, body * { box-sizing: border-box } o box-sizing É unha propiedade que modifica o comportamento do navegador predeterminado cando se definen as dimensións dun elemento. Un exemplo rápido: se asignamos un contedor a width de 200px e logo engadimos un bordo de 2px, ese contedor ocupará . Estraño, non? O que fai box-sizing: border-box é só que por moito tempo que engadimos a que continúa a medir 200px.
Comentar o CSS
Os idiomas de programación están deseñados para comprende-los unha máquina, non o humano. Temos que pensar no noso futuro ou outra persoa que pode ler o noso código, por iso sempre é bo deixar comentarios.
/* Esto es un comentario simple */Tamén é unha boa idea introducir as seccións con comentarios en forma de bloque:
/*------------------------------------*\ HEADER STYLES\*------------------------------------*/o 0 Non ten unha unidade
Cada vez que un valor é cero, o correcto non é indicar ningunha unidade. É incorrecto usar 0px ou 0em.
Evite usar! Importante
Tendo Un bo control da fervenza é esencial para crear código limpo e ordenado. O que facemos con !important é alterar o funcionamento natural da fervenza, un exemplo:
p { color: red !important;}. . .p { color: blue;} Neste código os parágrafos deberían ter a cor azul, pero declarando un !important recollería o vermello.É ilóxico e fai o código que fai o código, polo que temos que limitar o seu uso como última opción.
Selectores de grupo
Se temos o seguinte código:
h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}Podemos sintetizalo para que sexa menos redundante:
h1,h2 { font-weight: 800;}h1 { font-size: 2.5em;}h2 { font-size: 2em;}Deste xeito, se un futuro queremos cambiar o espesor da fonte, só teremos que modificar un valor.
Segue unha guía de estilo CSS
CSS é unha linguaxe poucoimal e que pode converterse nun problema ao traballar como equipo ou seguir unha boa estrutura. É por iso que é mellor seguir unha guía de estilos que unifique e faga que todos os membros escriban o código igual. Un dos máis coñecidos e coa mellor reputación é a guía de estilo que elaborou Airbnb. Por suposto, hai máis, e sempre podes crear o teu propio se o considera oportuno. O obxectivo final é que todo o código de aplicación é uniforme.
Usar preprocesadores como sass
Hoxe é esencial usar un preprocesador ao traballar con follas de estilos. Un dos máis populares e que o uso personalmente é SASS.
Os preprocesadores permítennos ter moitas follas de estilos que se compoñen nun só, polo que non afecta o rendemento. Isto evita ter que xestionar unha folla monstruosa de estilos de miles de liñas e aforrar moito tempo. É por iso que é importante seguir unha boa estrutura e tamén unha boa guía de estilo de sass. Esta é a estrutura que adoito usar nos meus proxectos, extraída da ligazón 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 archivosProba o deseño en varios navegadores
Proba esencial O deseño polo menos en Firefox, Chrome e Edge e en dispositivos móbiles polo menos en Chrome. Se non teme a súa vida e quere ter un apoio completo, pode probar Internet Explorer 11, aínda que nas portas 2019 nada pasaría por non darlle soporte.