Tipy pre kódovanie CSS

Pár pripomienok pre kódovanie CSS.

ictweb-01-oznamy

1. pozor na “vytratenie” okrajov

Pokiaľ sa stretávajú dva prvky s nastaveným vertikálnym marginom, ten menší sa “vytratí”. Horný prvok má margin-bottom: 30px a ten pod ním margin-top:50px, tak medzera medzi nimi bude 50px.

2. display:flex je na stavanie layoutu

Pozor však na podporu v prehliadačoch. Pre Safari musíte špeciálne a rovnako s IE bude možno problém.

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

3. resetnite to

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Ja naviac odporúčam mať resetovanie základných HTML značiek. Môžete na to použiť hotové “normalizačné” kódy ako normalize.css, minireset či ress. Korigujú sa tým rozdiely medzi rôznymi prehliadačmi, čo vyrieši odlaďovanie, testovanie a iné problémy.

4. všade dajte border-box

box-sizing môže mať dve možnosti.

content-box (default) – znamená, že nastavenie width a height platí len na plochu obsahu prvku. Všetky padding, border ho obkolesia. Ak teda nastavíte prvku width na 100px a nastavíte padding 10px, tak celková plocha, ktorú prvok zaberie má šírku 120 px.

border-box – padding, border sú súčasťou nastavenej width. Prvok bez ohľadu na nastavenie padding či border má vždy šírku akú uvediete vo width.

Druhá možnosť je teda pre počítanie s miestom zrejme ľahšie použiteľná.

5. obrázky ako background

Pokiaľ v rámci layoutu používate obrázky, je výhodnejšie vkladať ich ako pozadie prvkov. To je potom príjemnejšie pre flexibilný layout. Ľahšie sa rieši pomer strán a podobné problémy pri zoomovaní obrázku.

6. lepšie okraje buniek v tabuľkách

Jednoduchá finta border-collapse: collapse vo vlastnostiach TABLE urobí okraje tabuľky ďaleko krajšie ako defaultné nastavenie.

7. komentujte štrukturovane

Väčšie bloky komentujte takto

/*---------------
    #Header
---------------*/
header { }

header nav { }

Menej dôležité prvky okomentujte nasledovne

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

Rýchle “skrytie” jedného riadku sa nedá robiť nepárovým komentovaním, takže

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8. Pomenúvanie

Radšej pomlčky na oddelenie

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

Používanie podtržítok je mor, nerobte to.

9. CSS sú kaskádové, nemusíte sa opakovať

Pokiaľ prvok dedí z nadradeného nejakú vlastnosť, nie je nutné ju v ňom opakovať.

10. animujte pomocou transform

11. používajte knižnice

12. prebíjanie sa navzájom

a{
    color: #fff;
    padding: 15px;
}

a#blue-btn {
    background-color: blue;
}

a.active {
    background-color: red;
}
<a href='#' id='blue-btn' class="active">Active Button </a>

Červená sa neobjaví…

13. nepoužívať !important

14. pre texty “all capslock” nepíšte text všetko veľkým ale použite text-transform

15. Jednotky Em, Rem, a Pixel

Mali by ste byť pri ich použití aspoň konzistentní pretože sa nedá jasne povedať, čo je lepšie používať. Em a Rem by mohli byť príjemnejšie pri pružných layoutoch, kedy chcete dosiahnuť zväčšovanie a zmenšovanie prvkov podľa veľkosti viewportu.

16. preprocesor na veľké projekty

Tieto nástroje môžu pomôcť riešiť radikálne zmeny v návrhu pretože v kóde napr. použijete premenné a tým pádom ich môžete zmeniť na jednom mieste.

via: tutorialzine

Napísal rony