Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
• Oorsprong • Basics • Wat fixt het? BEMBEMBEM
Slide 3
Slide 3 text
• Koppeling met html • Conflicten in selectors • Onbedoelde cascades CSS The Bad Parts
Slide 4
Slide 4 text
• OOCSS (Nicole Sullivan) • Yandex • Nicolas Gallager Russia to the rescue
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
• Block • Element • Modifier Basics
Slide 7
Slide 7 text
.cup (block) .cup--glass (modifier) .beer (block)
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Maar wat fixt het nou?
Slide 10
Slide 10 text
Vijf problemen uitgelegd voor Real Programmers™
Slide 11
Slide 11 text
"Ik moet !important gebruiken om dit te overschrijven"
Slide 12
Slide 12 text
1. Cyclomatic complexity
Slide 13
Slide 13 text
A quantitative measure of the number of linearly independent paths through a program's source code.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Te generiek
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
"Ik heb geen idee waarom deze style wordt toegepast."
Slide 19
Slide 19 text
2. Composition over inheritance
Slide 20
Slide 20 text
Ook in CSS kun je beter selectors composen dan laten overerven
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
"Ik durf dit niet aan te passen want misschien gaan het ergens anders stuk."
Slide 26
Slide 26 text
3. Open/Closed principle
Slide 27
Slide 27 text
Open for extension, closed for modification
Slide 28
Slide 28 text
Als je veelgebruikte styles aanpast gaat er bijna zeker weten ergens wat kaduuk
Slide 29
Slide 29 text
Gateway to hell
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Op deze manier zijn de nieuwe styles opt-in en weet je zeker dat er niks breekt
Slide 32
Slide 32 text
"Deze selector wordt op twintig plekken gebruikt. Waar moet ik zoeken?"
Slide 33
Slide 33 text
4. Single source of truth
Slide 34
Slide 34 text
Welke styles gelden nu voor .cookie? En als ik hier .cookie aan wil passen, waar moet ik dan zijn?
Slide 35
Slide 35 text
Hier weet ik exact welke styles applied worden, en waar ik ze kan vinden
Slide 36
Slide 36 text
Styles voor .card zitten altijd in card.css Conventie: module == file
Slide 37
Slide 37 text
"Deze selector wordt in wel 20 files gebruikt."
Slide 38
Slide 38 text
5. Single responsibility principle
Slide 39
Slide 39 text
Deze button doet een heleboel en kan niet hergebruikt worden.
Slide 40
Slide 40 text
Nu is de button herbruikbaar en doet elke selector maar één ding
Slide 41
Slide 41 text
Tijd voor ACTIE
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content