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!

Made with Slides.com