L'aspecte o el "estil" d'un lloc web està dictada per CSS (Cascading Style Sheets). Aquest és un fitxer que afegireu al directori del vostre lloc web que contindrà les diverses regles CSS que creen el disseny visual i el disseny de les vostres pàgines.
Tot i que els llocs poden utilitzar i, sovint, fer servir diversos fulls d'estil, no cal fer-ho. Podeu col·locar totes les vostres regles CSS en un sol arxiu, i en realitat hi ha beneficis per fer-ho, incloent el temps de càrrega més ràpid i el rendiment de les pàgines, ja que no necessiten obtenir diversos fitxers. Tot i que són molt grans, els llocs empresarials poden necessitar fulls d'estil separats, de vegades, molts llocs petits o mitjans poden fer-ho perfectament amb només un fitxer. Això és el que faig servir per a la majoria del meu treball de disseny web: un sol arxiu CSS amb totes les regles que necessiten les meves pàgines. Així que ara es fa la pregunta: què hauria d'anomenar aquest fitxer CSS?
Naming Basics del conveni
Quan creeu un full d'estils extern per a les vostres pàgines web, haureu de nomenar el fitxer seguint convencions de noms similars per als vostres fitxers HTML:
No utilitzeu caràcters especials
Només haureu d'utilitzar les lletres az, números 0-9, subratllat (_) i guions (-) en els noms dels fitxers CSS. Tot i que el vostre sistema de fitxers us permet crear fitxers amb altres caràcters, el sistema operatiu del vostre servidor pot tenir problemes amb caràcters especials. Sou més segur utilitzant només els caràcters esmentats aquí. Després de tot, fins i tot si el vostre servidor permet caràcters especials, pot ser que no sigui així si decideix traslladar proveïdors d'allotjament en el futur.
No feu servir cap espai
Igual que amb caràcters especials, els espais poden causar problemes al vostre servidor web. És una bona idea evitar-los en els vostres noms d'arxiu. Fins i tot faig que sigui un punt anomenar fitxers com PDF fent servir aquestes mateixes convencions, en cas que alguna vegada hagi d'afegir-les a un lloc web. Si creieu que necessiteu un espai per fer que el nom del fitxer sigui més fàcil de llegir, seleccioneu guions o guions baixos. Per exemple, en comptes d'utilitzar "aquest és el fitxer.pdf", usaria "this-is-the-file.pdf".
El nom del fitxer hauria de començar amb una lletra
Si bé aquest no és un requisit absolut, alguns sistemes tenen problemes amb els noms d'arxius que no comencen amb una lletra. Per exemple, si decideix iniciar el vostre fitxer amb caràcter de número, això pot causar problemes.
Utilitzeu la casella inferior
Tot i que no és necessari per a un nom de fitxer, és una bona idea, ja que alguns servidors web distingeixen entre majúscules i minúscules, i si oblideu i fa referència al fitxer en un cas diferent, no es carregarà. En el meu propi treball, faig servir caràcters de minúscules per a cada nom de fitxer. Realment he trobat que això és quelcom que molts dissenyadors web nous lluiten per recordar de fer. La seva acció predeterminada quan es nomena un arxiu és capitalitzar el primer caràcter del nom. Eviteu això i introduïu l'hàbit de només caràcters en minúscules.
Mantén el nom del fitxer tan curt com sigui possible
Si bé hi ha un límit de mida del nom del fitxer a la majoria de sistemes operatius, és molt més llarg del que és raonable per a un nom de fitxer CSS. Una bona regla general no té més de 20 caràcters per al nom del fitxer que no inclou l'extensió. De manera realista, qualsevol cosa molt més llarga que no sigui difícil de treballar i enllaçar-hi de totes maneres.
La part més important del vostre nom de fitxer CSS
La part més important del nom del fitxer CSS no és el nom del fitxer, sinó l'extensió. No es requereixen extensions als sistemes Macintosh i Linux, però és convenient incloure-ne una de totes maneres en escriure un fitxer CSS. D'aquesta manera sempre sabreu que és un full d'estil i no ha d'obrir el fitxer per determinar el que és en el futur.
Probablement no sigui una gran sorpresa, però l'extensió del fitxer CSS hauria de ser:
.cssConvencions de nomenclatura d'arxius CSS
Si només teniu un fitxer CSS al lloc, podeu indicar-lo com vulgueu. Jo prefereixo:
styles.css o default.cssCom que la majoria dels llocs on treballo inclouen un sol arxiu CSS, aquests noms funcionen bé per a mi.
Si el vostre lloc web usarà diversos fitxers CSS, citeu els fulls d'estil després de la seva funció, de manera que queda clar exactament quina és la finalitat de cada fitxer. Atès que una pàgina web pot tenir diversos fulls d'estil adjunts a ells, ajuda a dividir els vostres estils en diferents fulls depenent de la funció d'aquest full i dels estils que conté. Per exemple:
- Disseny vs Disseny layout.css design.css
- Seccions de pàgina main.css nav.css
- Lloc sencer amb subseccions mainstyles.css subpage.css
Si el vostre lloc web utilitza un marc d'algun tipus, és probable que noteu que utilitza diversos fitxers CSS, cadascun dedicat a diferents parts de les pàgines o aspectes del lloc (tipografia, color, disseny, etc.).
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/09/17