CSS
A CSS ILYEN! :)
INKÁBB ILYEN :(
body .top_szponzor .wallpaper-ad-goAd .wallpaper-ad-container.full-width {
width: 100% !important
}
DE MIÉRT? :(
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
t
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;
}
-50% NYERÉS!
MEGEGYEZTÜNK A KONVENCIÓKBAN
RENDBEN VANNAK TARTVA
LEHET ÚJRAFELHASZNÁLNI
NEM TARTANAK A TÖBBIEK RENDET :(
Az fáj, hogy
LINT!
...
- Disallow @import
- Disallow selectors that look like regular expressions
- Disallow universal selector
- Disallow unqualified attribute selectors
- Disallow units for zero values
- Disallow overqualified elements
- Require shorthand properties
- Disallow duplicate background images
- Disallow too many floats
- Don't use too many font-size declarations
- Disallow IDs in selectors
- Disallow !important
- Disallow qualified headings
- Headings should only be defined once
...
A CSS
NEM FÁJ
DÖNTS
ÍRD LE
MUTASS PÉLDÁT
TARTS RENDET
@hubudibu @lab_coop @frontendmeetup @cssconfbudapest
CSS Fájdalmak
By Anikó Fejes
CSS Fájdalmak
Web Conference Hungary 2015
- 984