A Cascading Style Sheets (CSS) használata nehéz lehet a kezdők számára. A CSS használatával strukturálhatja, frissítheti és karbantarthatja az alkalmazás megjelenését. A nyelv azonban készségeket igényel a HTML-oldalak kezeléséhez a kívánt elrendezés eléréséhez.
Íme néhány hiba, amelyet el kell kerülni, ha CSS-sel dolgozik. Időt takarítanak meg, és megkönnyítik a fejlesztési folyamatot.
1. A px használata a betűméretekhez
A "px" egység pixeleket jelöl. Használhatja különféle hosszúságok kifejezésére a weboldalon, az elem szélességétől és magasságától a betűméretig.
A px azonban rögzíti a tervet egy rögzített méretre minden képernyőn. Egy képpont méretű kép az egyik képernyő teljes szélességét, a másiknak pedig csak egy kis részét elfoglalhatja. Ha arányosabb elemet szeretne, relatív méréseket használjon mint például a rem, vagy százalékok (%).
A legjobb relatív mérés a rem. Ez az egység a gyökérelem betűméretére vonatkozik, amelyet az olvasó gyakran beállíthat a böngésző beállításaiban. A következő példában láthatja a px és a rem hatását egy elemre:
html>
<HTML>
<fej>fej>
<test>
<h1>Ez az 1. címsorh1>
<h2>Ez a 2. címsorh2>
<p>Ez egy bekezdés.p>
<p>Ez egy másik bekezdés.p>
test>
html>Ebben a dokumentumban a betűméreteket a következő CSS-kóddal képpont-egységekkel módosíthatja:
h1 {
betűméret: 50px;
}h2 {
betűméret: 30px;
}
p {
betűméret: 15px;
}
Az eredményül kapott oldal elfogadhatónak tűnik, ha nagy képernyőn nézi:
De nem tűnik reprezentatívnak egy kisebb képernyőn, mint egy telefonon:
Ezután alkalmazza a rem-et ugyanarra a tartalomra. Adjon meg egy alap betűméretet a html elemen, a többi elemet pedig rems segítségével, az alábbi ábrán látható módon:
html {
betűméret: 16px;
}h1 {
betűméret: 3rem;
}h2 {
betűméret: 2rem;
}
p {
betűméret: 1rem;
}
Figyelje meg a különbséget a nagy és a kis képernyők között. Remek esetén a tartalom a képernyő méretétől függetlenül jobban skálázódik. Az elemek soha nem lépik túl a beállított képernyőméretet. Ezért jobb, ha pixel helyett relatív hosszúságot használunk.
Asztali képernyőn:
Kis képernyőn a rem egységekben lévő szöveg továbbra is olvasható:
2. Az összes stílus egy fájlba helyezése
Ha egyetlen CSS-fájlt használ egy nagy projekthez, az káoszhoz vezethet. Egy hosszú kódsort tartalmazó fájl lesz, amely zavaró lesz a frissítés során. Próbáljon meg különböző fájlokat használni a különböző összetevők CSS-stíluslapjaihoz.
Például különböző fájlokat használhat a navigációhoz, a fejléchez és a lábléchez. És egy másik a test részeihez. A CSS-fájlok szétválasztása segít az alkalmazás szerkezetében, és elősegíti a kód használhatóságát.
3. Inline CSS nem megfelelő használata
A vaníliás CSS-ben ugyanúgy stílusokat írhatunk a HTML oldalakra, mint azokon CSS-keretrendszerek, mint például a Bootstrap és a TailwindCSS. A beágyazott CSS lehetővé teszi, hogy egyedi stílust alkalmazzon egy HTML-elemhez. A HTML elem style attribútumait használja.
A következő kód egy példa a soron belüli CSS-re.
<h2stílus="szín: zöld;">Ez egy zöld rovath2>
<pstílus="piros szín;">Ez egy piros bekezdés.p>
A szöveg így fog megjelenni:
A HTML azonban csak a beágyazott CSS-sel lehet rendetlen. Mivel a CSS-nek nincs más helye, az összes CSS ugyanabban a fájlban létezik, mint a HTML. Zsúfoltnak fog tűnni. Egy ilyen fájl szerkesztése nehézkes, különösen, ha nem az Ön kódja.
Ezenkívül a beépített CSS-ben minden elemhez kódot kell írni. Ez növeli az ismétlődést és csökkenti a kód újrafelhasználását. Weboldalai stílusának kialakításához mindig használja a külső stíluslapok és a belső CSS kombinációját.
4. Túlhasználat !fontos
A CSS-ben a !fontos szabály nagyobb jelentőséget ad egy tulajdonságnak/értéknek. Ez felülírja az adott elemen az adott tulajdonságra vonatkozó egyéb stílusszabályokat.
Csak néhánynak kellene lennie !fontos szabályokat a kódjában. Csak szükség esetén használja. Nincs értelme kódot írni, majd felülírni. A kód rendetlennek tűnik, és problémákat okoz, ha egyes eszközökön fut.
html>
<html>
<fej>fej>
<test>
<p> narancssárga vagyok p>
<posztály="az osztályom"> én zöld vagyok p>
<pid="az én személyi azonosítóm"> Kék vagyok. p>
test>
html>CSS:
#az én személyi azonosítóm {
háttérszín: kék;
}.az osztályom {
háttérszín: zöld;
}
p {
háttérszín: narancs !fontos;
}
Az eredmény a következő:
5. Nem követi az elnevezési konvenciókat
A CSS elnevezési konvenciókkal rendelkezik, amelyek eligazítják a fejlesztőket a szabványos kód írásában. Ez elengedhetetlen, ha a végén a CSS fájl hibakeresése egy jövőbeli időpontban.
Az egyik ilyen szabvány magában foglalja a kötőjelek használatát a csoportosított szavak elkülönítésére. A másik az, hogy egy szelektort aszerint nevezünk el, hogy mit csinál. Így annak, aki megnézi, nem kell találgatnia. Ezenkívül megkönnyíti a kód olvasását, karbantartását és megosztását. Például:
Ehelyett:
.kép1 { margó-bal: 3%; }Így írd le:
.fiú-kép { margó-bal: 3%; }Ha megnézi a stíluslapot, pontosan tudni fogja, hogy melyik képhez tartozik a kód. A Google HTML/CSS stílus útmutatója számos további konvenciót sorol fel, amelyeket minden fejlesztőnek tudnia kell.
A megjegyzések írása a leginkább alulértékelt készség a programozásban. Sokan elfelejtenek megjegyzéseket írni a kódjuk magyarázatához. De időt takarít meg. A megjegyzések elengedhetetlenek a kód olvasásához és karbantartásához.
Mivel a CSS laza szerkezetű, és bárki kialakíthatja saját konvencióit, a megjegyzések létfontosságúak. Jó gyakorlat, ha jól strukturált megjegyzésekkel magyarázza el stíluslapját. Írhat megjegyzéseket, amelyek elmagyarázzák a kód egyes részeit és azok működését.
/* a videóelemeknek hely kell a lélegzéshez */
.videó {
margin-top: 2em;
}
/* a hős szekció formázása */
.üdvözlés {
margin-top: 1em;
}
7. Előzetes tervezés elmulasztása
Sokan csinálják, de súlyos hiba terv nélkül elkezdeni a kódolást. A CSS határozza meg, hogyan néz ki a kezelőfelület szerkezete. A dizájn sokat elárul a programozási készségeidről.
A webhely kialakítása tisztázza elképzelését, és tisztázza az eléréséhez szükséges erőforrásokat. Legyen mentális képed a projektedről. Ezután tervezze meg papírra vagy használja tervezési eszköztár, mint a Canva hogy vizualizáld, amit akarsz.
Ha teljes képet kap a projektről, állítsa össze az összes erőforrást, és kezdje el a kódolást. Időt és redundanciát takarít meg.
Miért érdemes megfontolni ezeket az ajánlásokat
Ha alkalmazásokat fejleszt a weben, akkor CSS-t fog használni. A CSS-szel való jó munkavégzés gyakorlatot és a szabványos konvenciók betartását igényli. A konvenciók nemcsak olvashatóvá, hanem karbantarthatóvá is teszik a kódot.
A szabványos kód írása időt és erőfeszítést takarít meg. A kezelőfelület formázásával töltött időt összetettebb funkciókra is fordíthatja. Azt is biztosítja, hogy a kódot újra felhasználhassa és megoszthassa másokkal. Írjon jobb kódot a beállított konvenciók betartásával, és váljon jobb fejlesztővé.