Zer da koma CSS hautagailuan?

Zergatik koma sinpleak kodifikazioa sinplifikatzen du

CSS, edo Cascading Style Sheets, web diseinuaren industriak gune bisualak estilo bisualak gehitzeko modua da. CSS bidez, orrialdearen diseinua, koloreak, tipografia , atzeko planoko irudia eta askoz gehiago kontrolatu ditzakezu. Funtsean, estilo bisual bat bada, CSS estilo horiek zure webgunera eramateko modua da.

CSS estilo bat dokumentu batera gehitzen duzunean, dokumentua luzeagoa eta luzeagoa izango dela nabarituko duzu. Orrialde eskas gutxi dituen gune txiki bat ere CSS fitxategi sorta batekin amaitu daiteke, eta eduki ugari dituzten orrialde asko eta asko dituen gune osoak CSS fitxategi handiak izan ditzake. Horrela, estilo-orrietan sartutako komunikabideen kontsulta asko dituzten guneak sentikorren arabera konposatzen dira, itxurak nola begiratzen duten eta orriak pantaila desberdinetan jartzen dituen aldatzeko.

Bai, CSS fitxategiak luzeak izan daitezke. Hau ez da arazorik nagusien gunearen errendimendua eta deskargarako abiadura, CSS fitxategi luzea nahiko txikia delako (testu dokumentu bat besterik ez baita). Hala eta guztiz ere, apur bakoitza orriaren abiadurari dagokionez zenbatzen da, beraz, zure estiloa xehatzen baduzu, ideia ona da. Hemen da "koma" oso erabilgarriak zure estilo-orrian.

Commas eta CSS

Komandoak CSS hautatzailearen sintaxian jokatzen duen zer rol galdetu ahal izango duzu. Esaldietan bezala, koma bereizmen-kodea ez da kodetzen. Komazkoa CSS hautatzailean hautagailu anitzak bereizten ditu estilo berekoen artean.

Esate baterako, behean CSS batzuk begiratzen ditugu.

th {color: red; }
td {kolorea: gorria; }
p.red {kolorea: gorria; }
div # firstred {kolorea: gorria; }

Sintaxia honekin, nahi dituzun tags, td etiketak, paragrafo-etiketak, klase-gorriarekin, eta identifikazio IDa duten IDa, estilo-kolorea gorria izan dezaten nahi duzu.

Hau guztiz onargarria da CSS baina badira bi desabantaila esanguratsuak modu honetan idazteko:

Desabantaila hauek ekiditeko eta CSS fitxategiak arintzeko, koma erabiliko dugu.

Commas hautatzaileak bereizteko

4 CSS hautapen eta 4 arau bereizi idazteko beharrean, estilo horiek guztiak arauaren propietate bat konbinatu ahal izango duzu komaz banakako hautatzaileak bereizita. Hona hemen nola egingo litzatekeen:

th, td, p.red, div # firstred {kolorea: gorria; }

Komazaren karakterea, funtsean, "eta" hitza hautatzen du. Beraz, hau aplikatzen zaie tags eta td etiketak eta paragrafo-etiketak klasearen gorriarekin eta IDa idazgarria duten IDa. Hori izan zen lehenago, baina 4 CSS arau behar izan beharrean, hautesle anitzetako arau bakarra dugu. Hau da koma hautatzailearenean, hautagailu bat baino gehiago arau bakarrean edukitzea ahalbidetzen du.

CSS fitxategiak garbiagoa eta garbiagoa egiten ez denez, etorkizuneko eguneratzeak askoz ere errazagoa egiten du. Orain, kolorea gorriz kolore urdinera aldatu nahi baduzu, aldaketa bat egin behar duzu kokaleku batean, jatorrizko 4 estiloko arauen ordez! Pentsatu denbora aurreztea CSS fitxategi osoan zehar eta ikusi nola denbora eta espazioa denbora luzean gorde ahal izango duzu Rune luzean!

Sintaxi aldakuntza

Zenbaitek aukeratzen dute CSS gehiago irakurgarria, hautagailu bakoitza bere lerroan bereizita, lerro batean lerro guztiak idaztea baino. Hau da nola egingo litzatekeen:

garren,
td,
p.red,
div # firstred
{
kolorea: gorria;
}

Kontuan hartu komando bat behin hautatzaile bakoitzaren ondoren eta "idatzi" erabili hurrengo hautatzailea hausteko bere lerroan. Ez duzu koma gehitu azken hautatzailearen ondoren.

Zure hautagailuen artean koma erabilita, etorkizunean eguneratzea errazagoa izango den estilo-orri trinkoagoa sortuko duzu eta gaur egun errazagoa izango da.

Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/05/17