CSS

A CSS ILYEN! :)

INKÁBB ILYEN :(

body .top_szponzor .wallpaper-ad-goAd .wallpaper-ad-container.full-width {
    width: 100% !important
}

DE MIÉRT? :(

flickr Kyle May

CSAK EGY ESZKÖZ

Kontent! Szemantika!

Logika! Működés!

Dizájn! Kinézet! Pixelek!

Think like a writer

engineer

artist

Mit jelent?

Hogy működik?

Mi az üzenete?

MI FÁJ?

ie6-ban ne essen szét

ne fagyjon ki a codepen

a holisztikus kézműves postcssemtől

IE-BEN SZÉT FOG ESNI!

Az fáj, hogy

nem fog.

...

NEM LEHET KÖZÉPRE IGAZÍTANI

Az fáj, hogy

NEM LEHET KÖZÉPRE IGAZÍTANI

Az fáj, hogy

  align-items: center;

developer.mozilla.org

egyéni

problémák

{

}

társas

problémák

holisztikus

kézműves

problémák

NEM TUDOM A

SZELEKTOROKAT

MÁR KÖVETNI

Az fáj, hogy


.table>tbody>tr>td,.table>tbody>
tr>th,.table>tfoot>tr>td,.table>
tfoot>tr>th,.table>thead>tr>td,
.table>thead>tr>th {
    vertical-align: middle;
    text-align: center;
    padding: 8px
}

.class?

#ID?

tag?

NEM TUDOM A

CLASNEVEKET

MÁR KÖVETNI

Az fáj, hogy

TAGEK A GÉPEKNEK

CLASSOK A KÓDEREKNEK

SZEMANTIKA?

.piros?

.azert-piros-mert!

.azert-piros-mert?

.pirosMertEz?

.ez_piros?

camelCase

- -- _ __

MIÉRT PIROS?

MERT GOMB?

MERT VESZÉLYES?

MERT A PIROSÍTÓ

DOBOZBAN VAN?

KOMPONENS

ÁLLAPOT

KONTEXTUS

MIÉRT PIROS?

MERT GOMB?

MERT VESZÉLYES?

MERT A PIROSÍTÓ

DOBOZBAN VAN?

.button

.button--jaj

.pirosito__button

MIÉRT PIROS?

MERT GOMB?

MERT VESZÉLYES?

MERT A PIROSÍTÓ

DOBOZBAN VAN?

button

.button.jaj

.pirosito .button

TAG VAGY CLASS?

EGY CLASS VAGY TÖBB?

MINÉL FLATEBB VAGY MINÉL CascadeSS-EBB?

BLOCK/COMPONENT/OBJECT

MODIFIER/STATE/THEME

ELEMENT/DESCENDANT

BEM

SMACSS

OOCSS

SUIT CSS CICABEKABANAN CSS

VÁLASSZATOK

ÍRD LE

MUTASD MEG

TARTS RENDET

EMBEREKEN FUTÓ SZOFTVER

EGYRE NEHEZEBB FELÜLÍRNI DOLGOKAT

Az fáj, hogy

pl. itt van ez a GOMB, és nem piros

<button style="background: red !important">
    JAJ
</button>

:(

"ÍRJUNK EGYEL ERŐSEBB SZABÁLYT"

DevTools

Driven

Development

specificity

FLAT SZELEKTOROK

LOW SPECIFICITY

TÉNYLEG AZÉRT PIROS, MERT

.table-BEN VAN?

TÉNYLEG AZÉRT SZÉLES, MERT

.wallpaper-ad-goAd-BAN VAN?

.top_szponzor-BAN VAN?

body-BAN VAN?

body .top_szponzor .wallpaper-ad-goAd .wallpaper-ad-container.full-width {
    width: 100% !important
}

MERT

TÉNYLEG CONTEXT A CONTEXT?

TARTSD LAPOSAN A SZELEKTOROKAT

LEGYEN TELJESEN FLAT?

Kevesebb specificity gond

több hosszabb csúnyább class

kevesebb cascade

VÁLASSZATOK

ÍRD LE

MUTASD MEG

TARTS RENDET

"KERESSÜK MEG, ÍRJUK ÁT"

.button {
    background: red;
}

"legyen ez a gomb piros"

CSAK EZ LEGYEN PIROS VAGY MÁS IS?

MIÉRT LEGYEN PIROS?

MIÉRT PIROS?

MERT GOMB?

MERT VESZÉLYES?

MERT A PIROSÍTÓ

DOBOZBAN VAN?

KOMPONENS

ÁLLAPOT

KONTEXTUS

MIÉRT PIROS?

MERT GOMB?

MERT VESZÉLYES?

MERT A PIROSÍTÓ

DOBOZBAN VAN?

.button

.button--jaj

.pirosito__button

RONDA HOSSZÚ CLASSAIM LETTEK A FLAT SPECIFICITYŐL

Az fáj, hogy

body .top_szponzor .wallpaper-ad-goAd .wallpaper-ad-container.full-width {
    width: 100% !important
}

A HOSSZÚ SZELEKTOROK BEZZEG NEM FÁJTAK!

INDOKOLATLANUL SOK CSSÜNK VAN TÖK UGYANARRA

Az fáj, hogy

KÓDDUPLIKÁCIÓ :(

ÚJRAFELHASZNÁLÁS :)

.egyik-doboz__cimsor {
    color: red;
}

.masik-doboz__cimsor {
    color: red;
}

TÉNYLEG CONTEXT A CONTEXT?

.cimsor {
    color: red;
}