Ako písať lepšie CSS
Týchto 7 jednoduchých rád vám pomôže napísať CSS, ktoré je čisté, efektívne a užitočné.
Písanie CSS nemusí byť .. Niekoľko menších úprav ako pracovať vo svojom súbore CSS kódov môže mať veľký vplyv. V tom to článku sa pozrieme na osem jednoduchých spôsobov, vďaka ktorým môžete zlepšiť vaše zručnosti v oblasti CSS a písať tak čistejšie, efektívnejšie a lepšie CSS kódy.
1. Začnite obnovením CSS
Niektorí môžu tvrdiť, že použitie CSS Resetu nie je potrebné. Avšak, CSS Reset umožňuje začať s čistou základňou, čo uľahčuje štýl vašej webstránky s viac predvídateľnými výsledkami vo všetkých oblastiach.
CSS Reset obnoví alebo prepíše prednastavené štýly prehliadača. Môžete si napísať svoje vlastné, použiť jedno z niekoľkých obnovení dostupných online alebo použijete kombináciu týchto dvoch.
2. Zistite, kedy sa používa CSS skratka
CSS skratka umožňuje nastaviť viacero vlastností prvku v jednom riadku. Použitie skratky šetrí priestor a zaberá menej času na načítanie. Nemali by ste ju však používať na všetko.
Niekedy normálny výraz poskytuje veľmi potrebnú jasnosť. Ale čo je dôležitejšie, keď potrebujete nastaviť len jednu alebo dve vlastnosti alebo jednoducho potrebujeme niečo nahradiť, normálny výraz môže byť skutočne lepší.
Niečo ďalšie na zapamätanie: keď používate skratku, vynechané vlastnosti sa obnovia, čo môže mať nežiadúci účinok.
3. Dodržujte DRY
Je dosť možné, že najlepšou radou pre písanie lepších CSS kódov je nasledovanie DRY metódy. DRY znamená „don't repeat yourself“ teda neopakujte sa – v zásade, nepoužívajte rovnaké kúsky kódu znovu a znovu.
Jedným zo spôsobov, ako v CSS udržať veci DRY je zoskupovať ich dokopy. Poztite sa na príklad:
Pôvodné CSS
Refaktorované a DRY
Ako môžete vidieť, nielenže to zníži celkovú veľkosť vášho súboru CSS - čím sa zrýchli čas načítania, ale budete mať výhodu aj v oblasti údržby. Ak sa vlastnosť farby potrebuje aktualizovať, aktualizujete ju iba na jednom mieste.
Môžete tiež použiť vlastné CSS vlastnosti, ktoré vám pomôžu zostať DRY. Používateľské vlastnosti sú vytvorené takto:
A potom ich môžete použiť kdekoľvek vo vašom CSS kóde a tak často, ako by ste chceli:
4. Prestaňte s nadmerným používaním !important
Existuje veľmi málo prípadov, kedy potrebujete použiť !important. Je to jedno z najdôležitejších a najviac nepochopených vyhlásení.
Nechápte to nesprávne, !important má svoje miesto, ale vo všeobecnosti weboví vývojári to používajú v zúfalstve, keď veci jednoducho nevyzerajú dobre.
Problémom je, že vyvoláva domino efekt, ktorý sa rapídne mení v nočnú moru, čím viac a viac sú veci deklarované !important. Používajte !important jedine v tom prípade, ak je to skutočne nevyhnutné.
5. Udržujte konzistentnosť
Bez ohľadu na to, ako napíšete vaše CSS a v ktorom poradí pridáte vlastnosti, doržte konzistentnosť. Niektorí ľudia usporiadavajú svoje vlastnosti abecedne, zatiaľ čo iní používajú viac logického prístupu (napr. organizovanie vecí podľa dĺžky alebo typu riadku). My upřednostňujeme to prvé, ale samozrejme je to na vás.
6. Nazvite veci inteligentne
Keď pomenovávate vaše selektory, nekomplikujte to. Buďte stručný a držte sa štandardnej konvencie pomenovávania.
Je potřebné zvážiť niekoľko vecí pri výbere názvov:
Vyhnite sa prezentačným slovám – to sú tie, ktoré zahŕňajú farbu a zobrazujú polohu (napr. zelený text alebo horný panel).
Používajte len malé písmená: CSS rozlišujú malé a veľké písmená
Oddeľte viac slov pomovou pomlčky: Napríklad hlavné-menu. Taktiež môžete použiť hlavnéMENU, ale často sa to neuprednostňuje.
Nebuďte príliš špecifický:
7. Ak je to vhodné, pridajte komentáre
Aj keď je pravda, že dobrý kód nepotrebuje komentáre, je taktiež pravda, že pridanie komentárov do kódu je v niektorých prípadoch nevyhnutné. Pravidlom je, že ak zdrojový kód bude mať prínos z komentára, pridajte ho – inak nie.
Ak vás zaujímate, kedy môžu byť komentáre potrebné, tu je niekoľko príkladov:
Komentovaný kód: ak z určitého dôvodu komentujete určitú časť kódu, nechajte komentár vysvetľujúci tento dôvod. Ak tak nespravíte, možno si nebudete pamätať, prečo ste to na prvom mieste komentovali
Pripomienky: Pravdepodobne pracujete na viacerých projektoch v danom okamihu. Ak je vaša pozornosť vytiahnutá skôr, ako máte možnosť niečo dokončiť, môžete použiť komentár ako pripomienku k tomu, čo ešte máte urobiť
Vysvetlenia: Ak je časť kódu nejasná a máte pocit, že vysvetlenie by vám pomohlo vyčistiť ho, pridajte komentár - je to tak jednoduché!
8. Objavte Flexbox
Pokiaľ ide o zarovnanie prvkov na stránke, modul Flexible Box Layout (alebo Flexbox) vám dáva úplnú kontrolu. Použitím flexových kontajnerov a flexových položiek môžete presne definovať, ako veci vyzerajú.
Je trochu zložité, kým sa do toho dostanete, ale stojí to za to.
Zdroj: CreativeBlog, CSS Beauty