Må man være født med padding på beina for
å bli god i CSS?
Markus Rauhut
Foto: Heinrich-Böll-Stiftung (CC BY-SA 2.0)
6"
70"
Hvorfor er CSS så
!important?
CSS
HTML
JavaScript
CSS
CSS
CSS
Kontrast
Desktop
Mobil
Header
Main
Sidebar
Footer
Footer
Main
Header
Hvordan kan man
bli god i CSS?
body {
color: black;
}
.important {
color: red;
}
span {
color: blue;
}
span {
color: blue;
}
Kaskade, Spesifisitet og Arv
margin
border
padding
content
Box-modellen
Flexbox / CSS Grid
1
2
3
Flexbox Zombies
CSS Diner
Flexbox Froggy
Grid Attack
Preprosessor (f.eks. SASS)
Block, Element, Modifier
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__search {}
/* Modifier that changes the style of the block */
.btn--big {}
$size-big: 2em;
.btn {
&__search {
text-transform: uppercase;
}
&--big {
height: $size-big;
}
} 
Linter
DevTools
Man trenger ikke å være født med padding på beina for
å bli god i CSS!
