Consells per treballar amb els teus fulls d'estil CSS3

Una vegada que hem definit l'estructura de la nostra pàgina web i hem desenvolupat el DOM d'una forma precisa, és important definir els estils de la mateixa, també és l'àrea més creativa i en el qual pots personalitzar amb major grau de precisió fins a l'últim racó del teu lloc web. Els fulls d'estil en cascada són la solució més adequada, però per a tots aquells que estiguin fent la seva primera incursió en el món de el desenvolupament web, hi ha alguns consells que s'han de tenir en compte per aconseguir els millors resultats.

Per obtenir un resultat professional propi d'un front end consagrat, cal tenir en compte certs aspectes com l'ordre, la llegibilitat i l'esmena dels errors més comuns dins d'aquest tipus de pràctiques. A continuació comparteixo cinc consells molt bàsics però alhora molt importants per al tractament i la configuració òptima de les nostres fulls d'estil CSS.

Assegura't d'establir un ordre i una estructura efectiva en els teus fulls d'estil CSS3

Jo sempre sòl dividir les meves fulles d'estil en un ordre jeràrquic. En primer lloc sòl aplicar selectors generals per després passar a afegir les declaracions dels selectors html i en última instància passar a treballar dins dels ids dels contenidors i elements menors. bàsicament sòl seguir la lògica de DOM i partir des dels pares per acabar en els fills. No obstant això també podem seguir una altra fórmula o ordre, per exemple podem agrupar els nostres selectors i declaracions tenint en compte quina sigui la funció d'ells. Tot dependrà de quines siguin les nostres preferències i com ens sentim més còmodes treballant.

Escull noms clars i concisos per a cada un dels teus selectors

Hi ha una cosa molt important que has de tenir en compte, i és que CSS3 diferència en l'ús de majúscules i minúscules, de manera que escriure una paraula amb majúscula pot significar alguna cosa diferent i pot provocar errors. El més senzill és emprar sempre minúscules per evitar aquest tipus de problemes. procura també escollir noms per les teves classes i els teus ID'S que siguin clarament recognoscibles i que no ens s'infereixin dubte o errors.

No t'oblidis d'afegir comentaris aclaridors

Segurament necessitis compartir els teus arxius amb altres persones, potser el teu client o companys del teu equip de treball com maquetadors, altres dissenyadors o desenvolupadors. Per això és molt important prestar atenció a l'estructura i procurar un acabat net i ordenat. Els comentaris aclaridors serviran perquè qualsevol que accedeixi a la nostra full d'estils sàpiga situar-se ràpidament amb un simple cop de vista. Qualsevol tipus d'observació que hagi de ser tinguda en compte haurà de figurar com un contingut. Recorda que pots incloure continguts tant en la teva arxiu Html com en el teu arxiu CSS i que en ambdós casos es tracta de comentaris que lògicament no es reflectiran en el resultat final i només seran visibles quan s'accedeixi a el codi font de la mateixa manera que poden ser molt útils.

Aplica un reset sempre en els teus fulls d'estil

Cada navegador té el seu full d'estils per defecte de manera que per evitar qualsevol error o canvi depenent de el navegador en què es visualitzi la nostra pàgina, és molt útil i recomanable que resetees teus fulls d'estils. Hi ha diverses alternatives el full d'estil reset d'Eric Meyer pot ser una molt bona opció.

Escull l'eina més eficaç

Hi ha moltes eines que pots utilitzar per obtenir la màxima eficàcia quan treballes en el disseny de la teva pàgina web. Des de la creació de Wireframes per desenvolupar l'estructura del teu site, com tot tipus d'aplicacions incloent Adobe Photoshop, Illustrator o Fireworks. També comptes amb molts editors professionals sent un dels més recomanables (al menys el que jo faig servir) Sublim Text o, si no Adobe Dreamweaver ja que proporcionen interfícies molt senzilles i amb alts graus de personalitat així com la possibilitat de treballar amb els nostres codis a través d'un sistema de dreceres i amb un sistema automàtic del que ens ajudarà a estalviar més de l'70% de temps que empraríem amb un editor de text pla tradicional.