Tipy pre kódovanie CSS

Pár pripomienok pre kódovanie CSS.

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.

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

3. resetnite to

[code]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[/code]

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

[code]
/*—————
#Header
—————*/
header { }

header nav { }

[/code]

Menej dôležité prvky okomentujte nasledovne

[code]
/* Footer Buttons */
.footer button { }

.footer button:hover { }
[/code]

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

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

/* Don’t */
p {
padding: 15px;
// border: 1px solid #222;
}
[/code]

8. Pomenúvanie

Radšej pomlčky na oddelenie

[code]
/* Do */
.footer-column-left { }

/* Don’t */
.footerColumnLeft { }

.footer_column_left { }
[/code]

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

[code]
a{
color: #fff;
padding: 15px;
}

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

a.active {
background-color: red;
}
[/code]

[code]
<a href=’#‘ id=’blue-btn‘ class="active">Active Button </a>
[/code]
Č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