Skip to content

Latest commit

 

History

History
467 lines (320 loc) · 8.22 KB

deck.md

File metadata and controls

467 lines (320 loc) · 8.22 KB

autoscale: false build-lists: true theme: merriweather, 7



A hammer, in CSS

#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;
}

inline 100% 1

^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;
}

[fit] 🔥 !important 🔥


[fit] just make it work


inline


  • Most of us have seen CSS like this
  • Many of us have written CSS like this
  • I have written CSS like this

left

Adam Detrick

@akdetrick

I work for Meetup


[fit] Why do we resort to using CSS as a blunt instrument?


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 is a render blocking resource.

inline 170%2

^CSS blocks this process until it is fully downloaded and parsed.



it's hard to build a complete mental model of the cascade when reading CSS


[fit] READING CSS

[fit] IS HARD


[fit] technical problems

[fit] !==

[fit] human problems

^As programmers...


Conway's Law

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


inline


inline


inline


inline


[fit] How do we break the cycle?


Make it your goal to

[fit] WRITE LESS CSS


Breaking the cycle

  • 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

Utility classes to the rescue

inline

^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

inline


[fit] .at[Breakpoint]_[property]--[variant]


  • .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

Benefits of utility classes

  • 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


Presentational classes are scary

inline


Presentational classes are scary

  • "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 { ... }

Don't forget to

[fit] WRITE LESS CSS!


Level of abstraction

Too specific:

.border--top--black--4px { ... }
.padding--left--21px { ... }

Just right:

.text--display1 { ... }
.media--xl { ... }

inline


Foster a good relationship between engineering and design

inline

^You can't create useful abstractions without cooperation from design


Design & Engineering

  • Speak the same language
  • Create a sense of shared ownership

inline


{
	"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)';

inline


[fit] Static documentation is

[fit] a lie waiting to happen


To write less CSS...

  • 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

[fit] CSS is better when

[fit] you write less of it


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

  1. https://specificity.keegan.st/

  2. Grigorik, I. - Deciphering the Critical Rendering Path. Retrieved from https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/