"CSS is strangely considered both one of
the easiest and one of the hardest
languages to learn as a web developer."
@sublimemarch
Slide 5
Slide 5 text
1. Why CSS is scary
2. Why CSS is great!
3. How to write better CSS
@sublimemarch
Slide 6
Slide 6 text
1. Why CSS is scary
2. Why CSS is great!
3. How to write better CSS
@sublimemarch
Slide 7
Slide 7 text
@sublimemarch
Slide 8
Slide 8 text
@sublimemarch
Slide 9
Slide 9 text
@sublimemarch
Slide 10
Slide 10 text
@sublimemarch
Slide 11
Slide 11 text
CSS is declarative.
@sublimemarch
Slide 12
Slide 12 text
In this declarative language...
✦ the last rule declared takes precedence
✦ the rule declared on the most specific selector
takes precedence
✦ there's no such thing as scope - everything is
global!
@sublimemarch
Slide 13
Slide 13 text
@sublimemarch
Slide 14
Slide 14 text
@sublimemarch
Slide 15
Slide 15 text
CSS IS awful!
@sublimemarch
Slide 16
Slide 16 text
CSS IS awesome!
@sublimemarch
Slide 17
Slide 17 text
1. Why CSS is scary
2. Why CSS is great!
3. How to write better CSS
@sublimemarch
Slide 18
Slide 18 text
The Separation of
Controls Principle
@sublimemarch
Slide 19
Slide 19 text
"A design principle for separating a computer
program into distinct sections, such that each section
addresses a separate concern. A concern is a set of
information that affects the code of a computer
program." - Wikipedia
@sublimemarch
Slide 20
Slide 20 text
We separate concerns
into HTML, CSS, and
Javascript.
@sublimemarch
Slide 21
Slide 21 text
HTML organizes
content.
@sublimemarch
Slide 22
Slide 22 text
CSS defines
presentation.
@sublimemarch
Slide 23
Slide 23 text
JS defines how
content interacts and
behaves with the
user.
@sublimemarch
Slide 24
Slide 24 text
CSS is flexible.
@sublimemarch
Slide 25
Slide 25 text
CSS is made of simple
things.
@sublimemarch
Slide 26
Slide 26 text
.selector {
name: value;
}
@sublimemarch
Slide 27
Slide 27 text
CSS is easy to
generate.
@sublimemarch
Slide 28
Slide 28 text
CSS stands alone.
@sublimemarch
Slide 29
Slide 29 text
Just look at this! Or this!
@sublimemarch
Slide 30
Slide 30 text
CSS is open source.
@sublimemarch
Slide 31
Slide 31 text
✨ CSS tries its best. ✨
@sublimemarch
Slide 32
Slide 32 text
1. Why CSS is scary
2. Why CSS is great!
3. How to write better CSS
@sublimemarch
Slide 33
Slide 33 text
CSS stops being scary when you
understand it and follow best
practices.
@sublimemarch
Slide 34
Slide 34 text
CSS is just another
programming
language
@sublimemarch
Slide 35
Slide 35 text
Apply your programming skills:
✦ Reading the docs
✦ Planning your code
✦ Pseudocoding
✦ Refactoring
@sublimemarch
Don't over-specify
#home #hero #claim .logo h2 {
display: inline-block;
}
For any h2 inside anything with the
logo class that's inside of the claim element
that's inside of the hero element
that's inside of the home element,
display with inline-block.
@sublimemarch
Slide 46
Slide 46 text
Very specific selectors are hard to
override in the future.
@sublimemarch
Slide 47
Slide 47 text
No !important flags
Kittens are cute.
@sublimemarch
Slide 48
Slide 48 text
No !important flags
Kittens are cute.
#pink-text {
color: pink;
}
@sublimemarch
Slide 49
Slide 49 text
No !important flags
Kittens are cute.
#pink-text {
color: pink;
}
p {
color: black !important;
}
@sublimemarch
Slide 50
Slide 50 text
And no inline styles
I love kittens.
@sublimemarch
Slide 51
Slide 51 text
Use a single class as your selector
.hero-text-link {
font-size: 18px;
}
@sublimemarch
Slide 52
Slide 52 text
Use a single class as your selector
.hero-text-link {
font-size: 18px;
}
instead of something more complex
.hero p a {
font-size: 18px;
}
@sublimemarch
Organize your files,
but also your
selectors.
@sublimemarch
Slide 64
Slide 64 text
hacks.css
@sublimemarch
Slide 65
Slide 65 text
In hacks.css, you should leave:
✦ your hacky code
✦ why you did it
✦ possible ways to fix it
@sublimemarch
Slide 66
Slide 66 text
Put it in a hacks.css file if you're
✦ using magic numbers
✦ writing overly specific selectors
✦ using !important flags
✦ undoing styles that are elsewhere in the code
@sublimemarch
Slide 67
Slide 67 text
Understand browser
compatibility.
@sublimemarch
Slide 68
Slide 68 text
https://caniuse.com/
@sublimemarch
Slide 69
Slide 69 text
And so much more!
- learn the box model
- use flexbox
- pick a preprocessor
- implement a naming methodology like BEM or OOCSS
- use a linter
- look at dev tools
- use a CSS reset
@sublimemarch