Escriure codi és fàcil, el difícil és escriure un codi de qualitat que sigui net i ordenat. Per aconseguir aquest objectiu es necessita metodologia, que s’adquireix amb l’experiència. En general aquest procés comporta pràctica i molt de temps, resultant moltes vegades aclaparador. Afortunadament hi ha una sèrie de bones pràctiques que poden orientar-nos (sobretot quan estem començant) i que m’han ajudat molt a començar.
En aquest article concretament veurem 12 bones pràctiques d’HTML i CSS molt fàcils d’aplicar i que milloraran la qualitat del nostre codi.
link millor que @import
Per incloure fulls d’estil al nostre HTML, el millor és utilitzar les etiquetes link que proporciona el propi llenguatge. Tingues en compte que com més fulles imports més trigarà la pàgina a carregar.
Utilitza classes en comptes de ids
Les id no aporten cap avantatge més enllà que no es poden (o no haurien) repetir-se. A l’hora d’aplicar estils als nostres elements, el millor és assignar classes. Això no vol dir que els aneu no hagin de usar-se, de fet són força útils per a JavaScript ja que permeten accedir a elements de DOM consumint pocs recursos.
En resum, reserva els ids per a la teva JavaScript, i la resta nombrálo amb classes. D’aquesta forma no hauràs de recordar si li asignaste un aneu o classe, i perdràs menys temps.
Noms de les classes
Hi ha moltes formes i recomanacions de nomenar les classes. Personalment utilitzo la nomenclatura BEM, perquè és molt autodescriptiva i està bastant estandarditzada.
També és recomanable que les classes d’estat (que són les que assignem amb JavaScript per manipular estils en una determinada situació) tinguin un nom semblant , per exemple: is-hide, is-show, is-collapse, etc.
Evitar declarar estils en línia
Quan vam crear codi HTML hem de pensar en que només ha d’estar definida l’estructura de la pàgina, no els estils.
<span style="color: blue">Texto</span>Aquest codi HTML té declarat un estil en línia, que no només crea confusió a qualsevol altra persona que llegeixi el codi, sinó que a més sobreescriu a qualsevol estil assignat per CSS. El recomanable és assignar-li una classe i aplicar-li estils al CSS.
No obstant això, hi ha ocasions en què sí que és útil declarar estils en línia: quan els definim via JavaScript (per crear efectes Parallax per exemple) o quan estem escrivint un article en un CMS i volem que un element tingui un estil molt concret.
Reestableix sempre els estils
els navegadors per defecte afegeixen marges i certs estils a les etiquetes bàsiques d’HTML. El problema està en que no tots els navegadors apliquen els mateixos estils, el que en ocasions pot desquadrar els nostres dissenys. La solució és resetejar els estils, i per això els més coneguts són Normalize o Reset. Quina triar? La diferència entre aquests dos és que el primer s’encarrega d’aplicar els estils base perquè siguin els mateixos per a tots els navegadors mentre que el segon elimina els marges de tots els elements. Personalment sòl preferir el segon però amb un petit afegit:
*, body * { box-sizing: border-box } El box-sizing és una propietat que altera el comportament per defecte de navegador quan es defineixen les dimensions d’un element. Un exemple ràpid: si assignem a un contenidor 1 width de 200px i després li afegim una vora de 2px, aquest contenidor ocuparà 204px. ¿Estrany, oi? El que fa box-sizing: border-box justament és que per molt vora que li agreguem segueixi mesurant 200px.
Comentar el CSS
els llenguatges de programació estan pensats perquè els entengui una màquina, no l’humà. Hem de pensar en el nostre jo futur o en una altra persona que pugui llegir el nostre codi, per aquest motiu sempre és bo anar deixant comentaris.
/* Esto es un comentario simple */També és bona idea introduir les seccions amb comentaris en forma de bloc:
/*------------------------------------*\ HEADER STYLES\*------------------------------------*/El 0 no té unitat
Cada vegada que un valor sigui zero el correcte és no indicar cap unitat. És incorrecte utilitzar 0px o 0em.
Evitar l’ús de! Important
Tenir un bon control de la cascada és essencial per crear codi net i ordenat. El que fem amb !important és alterar el funcionament natural de la cascada, un exemple:
p { color: red !important;}. . .p { color: blue;} En aquest codi els paràgrafs haurien de tenir el color blau, però a l’haver declarat un !important es colorearían de vermell.És il·lògic i fa el codi poc mantenible, així que hem de limitar el seu ús com a última opció.
Agrupar selectors
Si tenim el següent codi:
h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}Podem sintetitzar de manera que quedi menys redundant:
h1,h2 { font-weight: 800;}h1 { font-size: 2.5em;}h2 { font-size: 2em;}d’aquesta manera si un futur volem canviar el gruix de la font només haurem de modificar un valor.
Segueix una guia d’estil de CSS
CSS és un llenguatge poc restrictiu , i això pot convertir-se en un problema a l’hora de treballar en equip o seguir una bona estructura. Per això el millor és seguir una guia d’estils que unifiqui i faci que tots els membres escriguin igual el codi. Una de les més conegudes i amb millor reputació és la guia d’estil que va elaborar Airbnb. Per descomptat hi ha més, i sempre pots crear la teva pròpia si ho consideres oportú. L’objectiu final és que tot el codi de l’aplicació es vegi uniforme.
Usa preprocesadores com Sass
Avui dia és imprescindible l’ús d’un preprocessador a l’hora de treballar amb fulles d’estils. Un dels més populars, i el que faig servir personalment és Sass.
Els preprocesadores ens permeten tenir moltes fulles d’estils que després es compilen en una sola, per la qual cosa no afecta el rendiment. Això ens evita haver de lidiar amb una monstruosa full d’estils de milers de línies i ens estalvia molt de temps. Per això és important seguir una bona estructura i també una bona guia d’estil de SASS. Aquesta és l’estructura que sòl emprar en els meus projectes, extreta de l’enllaç 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 archivosProvar el disseny en diversos navegadors
Imprescindible provar el disseny a el menys a Firefox, Chrome i Edge, i en dispositius mòbils com a mínim en Chrome. Si no tems per la teva vida i vols tenir un suport complet pots provar amb Internet Explorer 11, tot i que a portes de 2019 tampoc passaria res per no donar-li suport.