Må man være født med padding på beina for
å bli god i CSS?
Markus Rauhut
Må man være født med padding på beina for å bli god i CSS?
Hvorfor skal jeg bry meg?
📱🖥
Mine tanker 🤓
- Skjermstørrelser
- Nettleserstøtte
- Komponenter
- Lokalisering og internasjonalisering
- Animasjon
- Universell utforming
- Tekniske begrensninger
Min tankeprosess 🤓
- Virker det på mobil og desktop?
- Støttes ulike nettlesere?
- Hvilke komponenter brukes?
- Brukes elementer til forskjellig kontekst?
- Skal noe animeres?
- Ivaretas universell utforming?
- Finnes det tekniske begrensninger?
Foto: Heinrich-Böll-Stiftung (CC BY-SA 2.0)
Hvorfor er CSS så vanskelig?
DROPPE DENNE?
Foto: Heinrich-Böll-Stiftung (CC BY-SA 2.0)
6"
70"
Cascading gjør det vanskelig å holde styr på hva som gjelder når
Hvorfor er CSS så
!important?
Hvorfor er CSS
viktig?
CSS
HTML
JavaScript
Some of the trouble with HTML and CSS lies with the fact that both languages are fairly simple, and often developers don't take them seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page. In the worst cases, JavaScript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating DOM elements is expensive). In other cases, nascent features are not supported consistently across browsers, which can make some features and styles not work for some users. Responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations.
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
Grunnkonsepter 🧱
- Cascade og arv (fargeblindhet, kontrast)
- Tekst (tekst i bilde, overskrifter og labels)
- Layout (rekkefølge, skjermretning, forstørrelse, navigering, instruksjoner, gjenkjennbarhet)
Grunnkonsepter 🧱
body {
color: black;
}
.important {
color: red;
}
span {
color: blue;
}
span {
color: blue;
}
Kaskade, Spesifisitet og Arv
<body>
<article>
CSS er
<span class="important">
veldig
</span>
<span>kult!</span>
</article>
</body>CSS er veldig kult!
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!
Må man være født med padding på beina for å bli god i CSS?
By Markus Rauhut
