Per què una coma simple simplifica la codificació
CSS o Fulls d'estil en cascada, són la forma acceptada de la indústria del disseny web per afegir estils visuals a un lloc. Amb CSS, podeu controlar el disseny de pàgina, els colors, la tipografia , la imatge de fons i molt més. Bàsicament, si és un estil visual, llavors CSS és la manera de portar aquests estils al vostre lloc web.
A mesura que afegiu estils CSS a un document, podeu observar que el document comença a estar més llarg i més llarg. Fins i tot un lloc petit amb només un grapat de pàgines pot acabar amb un arxiu CSS considerable, i un lloc molt gran amb un munt de pàgines de contingut únic pot tenir fitxers CSS molt grans. Això es compon dels llocs de resposta que tenen moltes consultes de mitjans inclosos en els fulls d'estil per canviar la forma en què es visualitzen els visuals i la pàgina s'aplica a diferents pantalles.
Sí, els fitxers CSS poden ser llargs. Aquest no és un problema important pel que fa al rendiment del lloc i la velocitat de baixada, ja que fins i tot un fitxer CSS llarg és probable que sigui bastant petit (ja que en realitat només és un document de text). Tot i així, cada poc compta quan es tracta de velocitat de pàgina, de manera que si podeu fer que el vostre full d'estil sigui més flexible, aquesta és una bona idea. Aquí és on la "coma" pot ser molt útil al vostre full d'estil.
Commas i CSS
És possible que us pregunteu quin paper té la coma en la sintaxi del selector CSS . Com en frases, la coma porta claredat -no codi- als separadors. La coma en un selector CSS separa diversos selectors dins dels mateixos estils.
Per exemple, vegem alguns CSS a continuació.
th {color: vermell; }
td {color: vermell; }
p.red {color: vermell; }
div # firstred (color: vermell; }
Amb aquesta sintaxi, esteu dient que voleu que les etiquetes, les etiquetes td , les etiquetes de paràgrafs amb la classe vermella i l'etiqueta div amb l'identificador de tot per tenir el color d'estil vermell.
Això és CSS perfectament acceptable, però hi ha dos inconvenients importants per escriure-ho d'aquesta manera:
- En el futur, si decideixes canviar el color del tipus de lletra d'aquestes propietats a blau, heu de fer que el canvi sigui quatre vegades al vostre full d'estils.
- Afegeix molts caràcters addicionals al full d'estils que no necessiteu. Aquests 4 estils poden no semblar exagerats, però si continueu fent això al llarg de tot el full d'estils, les línies sumen i aquest full serà molt més gran del necessari.
Per evitar aquestes desavantatges i racionalitzar el vostre fitxer CSS, intentarem utilitzar comesos.
Ús de comes a separadors selectors
En lloc d'escriure 4 selectors CSS separats i 4 regles, podeu combinar tots aquests estils en una propietat de regla separant els selectors individuals amb una coma. Així és com s'hauria de fer:
th, td, p.red, div # firstred {color: red; }
El caràcter de coma bàsicament actua com la paraula "i" dins del selector. Per tant, això s'aplica a les etiquetes t i etiquetes td i les etiquetes de paràgraf amb la classe vermella I l'etiqueta div amb el ID primer. Això és exactament el que teníem abans, però en lloc de necessitar 4 normes CSS, tenim una sola regla amb múltiples selectors. Això és el que fa la coma en el selector, ens permet tenir múltiples selectors en una sola regla.
No només aquest enfocament fa que els fitxers CSS més lleugers i més nets, sinó que també facilitin les actualitzacions futures. Ara, si voleu canviar el color de vermell a blau, només heu de fer el canvi en una ubicació en comptes de les regles originals de 4 estil que teníem. Penseu en aquests estalvis de temps a través d'un fitxer CSS complet i podeu veure com això us estalviarà temps i espai en la runa llarga.
Variació de sintaxi
Algunes persones opten per fer que el CSS sigui més llegible si separa cada selector en la seva pròpia línia, en comptes d'escriure-ho tot en una línia com a dalt. Així ho faria:
th,
td,
p.red,
div # firstred
{
color: vermell;
}
Tingueu en compte que col·loqueu una coma després de cada selector i, a continuació, utilitzeu "enter" per trencar el següent selector a la seva pròpia línia. NO afegiu una coma després del selector final.
Mitjançant l'ús de comes entre els vostres selectors, podeu crear un full d'estil més compacte que sigui més fàcil d'actualitzar en el futur i que és més fàcil de llegir avui mateix.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/08/17