autoscale: false build-lists: true theme: merriweather, 7
#sidebar .post .meta > a.author {
text-decoration: underline !important;
color: #0366d6 !important;
font-style: italic !important;
}
^Selecting an element and bludgeoning it with style properties until it looks right ^It is a blunt instrument for styling, and usually does more damage than good
#sidebar .post .meta > a.author {
text-decoration: underline !important;
color: #0366d6 !important;
font-style: italic !important;
}
^This is often done intentionally to override other styles
#sidebar .post .meta > a.author {
text-decoration: underline !important;
color: #0366d6 !important;
font-style: italic !important;
}
- Most of us have seen CSS like this
- Many of us have written CSS like this
- I have written CSS like this
I work for Meetup
It’s harder to read code than to write it. -- Joel Spolsky
^CSS presents its own layer of extra difficulty
CSS is especially difficult to read -- Me, right now on stage
^CSS blocks this process until it is fully downloaded and parsed.
^As programmers...
organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations -- Melvin Conway. "How Do Committees Invent?" 1968
- frame the problem correctly
- think about the developer experience
- focus on the decision point at which developers need to add more CSS
- reduce design fragmentation
^if these classes already exist and are easier to remember, you don't have to write extra CSS ^instead of having these rules burried in your CSS, they are exposed to all with easy to understand classes ^These are "purely presentational"
.row
, .row-item
, .row-item--shrink
.atMedium_display--inlineBlock
.atLarge_margin--center
.atMedium_align--left
Breakpoints | Property | Variants |
---|---|---|
medium , large |
align |
center , right , left |
medium , large |
display |
none , block , flex , inline , inlineBlock , inlineFlex |
medium , large |
padding |
top , right , bottom , left , none |
medium , large |
margin |
center |
medium , large |
border |
top , none |
medium , large |
visibility |
a11yHide , a11yShow |
medium , large |
width |
auto , full |
- small, sharp tools
- quickly assemble layouts in markup instead of writing styles from scratch
- apply classes to markup instead of adding CSS
- "style by memory"
^It's not all "paint by classes"; they just provide a good foundation
- "there are too many class names in one element, and the class name doesn't describe the actual meaning [of the content]"
- "I hope this is a cruel joke that you're trying to play on people, because this sounds like the worst idea I've ever seen for CSS! You may as well be writing all your CSS with inline style tags."
- "What's this shit. You write CSS like 5 years ago."
<div class="pos-bottom pos-left text-white">
<h1 class="text-reg pad-2-top">Star Wars: The ...
<datetime class="bold">Dec 20, 2015</datetime>
<p class="text-small">Ritz East, Phil...
</div>
<div class="event">
<h1>Star Wars: The ...
<datetime>Dec 20, 2015</datetime>
<p>Ritz East, Phil...
</div>
.event { ... }
.event h1 { ... }
.event datetime { ... }
.event p { ... }
Too specific:
.border--top--black--4px { ... }
.padding--left--21px { ... }
Just right:
.text--display1 { ... }
.media--xl { ... }
^You can't create useful abstractions without cooperation from design
- Speak the same language
- Create a sense of shared ownership
{
"color": {
"text": {
"primary": { "value": [46, 62, 72, 1] },
"secondary": { "value": [46, 62, 72, 0.60] },
"hint": { "value": [46, 62, 72, 0.35] },
"primaryInverted": { "value": [255, 255, 255, 1] },
"secondaryInverted": { "value": [255, 255, 255, 0.70] },
"hintInverted": { "value": [255, 255, 255, 0.35] }
}
}
}
"scss": {
"transforms": [
"attribute/cti",
"name/cti/prefixC",
"color/optimizedRGBA"
],
"buildPath": "./dist/",
"files": [
{
"destination": "scss/_colors.scss",
"format": "scss/variables"
}
]
}
"scss": {
"transforms": [
"attribute/cti",
"name/cti/prefixC",
"color/optimizedRGBA"
],
"buildPath": "./dist/",
"files": [
{
"destination": "scss/_colors.scss",
"format": "scss/variables"
}
]
}
"scss": {
"transforms": [
"attribute/cti",
"name/cti/prefixC",
"color/optimizedRGBA"
],
"buildPath": "./dist/",
"files": [
{
"destination": "scss/_colors.scss",
"format": "scss/variables"
}
]
}
"scss": {
"transforms": [
"attribute/cti",
"name/cti/prefixC",
"color/optimizedRGBA"
],
"buildPath": "./dist/",
"files": [
{
"destination": "scss/_colors.scss",
"format": "scss/variables"
}
]
}
$C_textPrimary: rgb(46,62,72);
$C_textSecondary: rgba(46,62,72,0.6);
$C_textHint: rgba(46,62,72,0.35);
$C_textPrimaryInverted: rgb(255,255,255);
$C_textSecondaryInverted: rgba(255,255,255,0.7);
$C_textHintInverted: rgba(255,255,255,0.35);
exports.C_TEXT_PRIMARY = 'rgb(46,62,72)';
exports.C_TEXT_SECONDARY = 'rgba(46,62,72,0.6)';
exports.C_TEXT_HINT = 'rgba(46,62,72,0.35)';
exports.C_TEXT_PRIMARYINVERTED = 'rgb(255,255,255)';
exports.C_TEXT_SECONDARYINVERTED = 'rgba(255,255,255,0.7)';
exports.C_TEXT_HINTINVERTED = 'rgba(255,255,255,0.35)';
- recognize why humans are bad at maintaining CSS
- make sure designers and engineers speak the same language
- style with utility classes
- automate documentation from source
Expressive CSS johnpolacek.com/content-display-patterns/
**Relevant Meetup projects:** [github.com/meetup/swarm-sasstools](https://github.com/meetup/swarm-sasstools) [github.com/meetup/swarm-constants](https://github.com/meetup/swarm-constants)
**Meetup tech blog:** [medium.com/making-meetup](https://medium.com/making-meetup)
@akdetrick
^Specifically call out that we do this open source
Footnotes
-
Grigorik, I. - Deciphering the Critical Rendering Path. Retrieved from https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/ ↩