Effortless Style
Complaints dept: @heydonworks
My Summer Job
In Situ
GENEVA
(photo: Ars Technica)The Unit is an Axiom
body {
font-size: 16px;
}
h2 {
font-size: 1.5em; /* 24px */
}
17-YEAR-OLD ME
- listless
- liked a drink
- probably had a cigarette in one hand
-
shit at soldering
FIRST TAKEAWAY OF MY TALK
When you're worried about your CSS
being "future proof"...
THINK OF ME
(photo: monkeyc.net)Now I'm
TRYING TO DO
A GOOD JOB...
even when it's not obvious :p
The Separation Of Concerns
"HTML should allow separation of content and presentation. For this reason, markup that expresses structure is usually preferred to purely presentational markup."
Design Principle
BAD
<center>
<ul face="arial">
<li><font color="white" size="2">A list item</font></li>
<li><font color="white" size="2">Another list thingy</font></li>
</ul>
</center>
GOOD
<ul>
<li>A list item</li>
<li>Another list thingy</li>
</ul>
BUT WHY?
Maintainable code base?
Efficiency?
Interoperability!
Victoria
- talented writer
- web savvy
- willing to learn new skills (metalanguage)
- not a designer + doesn't want to be
(photo: carbonNYC)
NO GOOD TO VICTORIA
<ul class="menu">
<li class="menu__item">first item</li>
<li class="menu__item">item number two</li>
</ul>
Can't be created with
Markdown
Textile
- WYSIWYGs
Standard HTML
Let's not ask a writer
to be a designer
Why I hate iOS7
How I Came To Terms With iOS7
50 Best iOS7 Icon Templates
Writing is mostly about paragraphs
Nulla
auctor eleifend turpis consequat pharetra. Nulla lobortis tempus
commodo. Donec et nisi dictum felis sollicitudin congue. Sed dapibus,
lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis
pretium sem orci aliquet mauris. Donec a congue leo. Vestibulum sit amet
ipsum lacus.
Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Suspendisse potenti. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Donec et nisi dictum felis sollicitudin congue. Curabitur consectetur faucibus nisl ac varius. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
Paragraphs aren't just paragraphs
- p
- p:first-of-type
- p:first-child
- p + p
- p:first-child:first-letter
WITHOUT EFFORT
*
The "Leftover Glue" problem
The lobotomized
owl selector
* + *
* + * {
margin-top: 1.5em;
}
* + * {
margin-top: 1.5em;
}
No additional selectors needed: effortless
Removal of left over glue is hard
Maybe...
.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
margin-bottom: 0;
}
Verbose, imprecise plus requires you to prescribe the "module" container
Spacing The Bottom Of Modules
AXIOMS MEAN INHERITANCE
Victoria can include
web components easily
<x-map data-key="6c86bb5b30a442c180772d978f3ae000"/>
Further reading: wai-aria-web-component on Github
Standards: It's not just about elements
CSS 2.1!
[href] {/* has href attribute */}
[href="n"] {/* href value == n */}
attr selectors + pseudo content
MARKDOWN:
[payment page](https://secure.example-site.com)
HTML:
<a href="https://secure.example-site.com">payment page</a>
The CSS:
HELPFUL
[href^="https"]:before {
content: '\E017';}
NOT SO HELPFUL (AUTHORED)
.icon-secure:before {
content: '\E017';
}
More href examples
- [href$="pdf"] → opens PDF (warning!)
-
[href^="mailto:"] → email protocol
- [href*="twitter.com"] → Twitter page
↓
↓
NOW DEPENDABLE SIGNIFIERS:
UNRELIABLE:
[href^="http:"]
MORE ROBUST:
[href^="http:"]:not([href*="this-domain.com"])
Really Effortless Style
Style without elements or classes or attributes or pseudo-content or javascript
## ROCK & ROLL
↓
(TWO DIFFERENT FONTS)
text=%26
Google sends a tiny 1 glyph font...
http://themes.googleusercontent.com/licensed/font?kit=xb9aY4w9ceh8JRzobID1nRI_LzupUmcPMBuwS4OyZBE
Then, in the CSS...
h2 {
font-size: 2em;
font-family: Lobster 2, Bevan;
}
CodePen demo
Self-correcting
GRIDS
:nth-child(3n+1):last-child
:nth-child(3n+1):nth-last-child(2)
:nth-child(3n+1):nth-last-child(2),
:nth-child(3n+1):nth-last-child(2) + *
~
4 items in last row
nth-last-child( 4 ), nth-last-child( 4 ) ~ li
desired width: 100% / 4
3 items in last row
nth-last-child( 3 ), nth-last-child( 3 ) ~ li
desired width: 100% / 3
100% / 3 = 33.333%
$cols = 3 (or whatever)
@for $i from 1 through $cols {
li:nth-child(#{$cols}n+1):nth-last-child(#{$i}) {
width: 100% / $i;
& ~ li {
width: 100% / $i;
}
}
}
Works for
✔Any number of columns
✔Any number of items
CodePen demo: http://codepen.io/heydon/pen/bcdrl
$cols = 3 (8 items)
$cols = 5 (8 items)
$cols = 5 (9 items)
All I've talked about is possible thanks to
- standard elements
- standard attributes
- standard text
- not breaching "separation"
In other words: not using classes
Reinventing the wheel
CSS gives so much power to the
class
attribute, that authors could conceivably design their own “document language” based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the “class” attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings.
"Trolling published as link bait"
"In the words of John MacEnroe,
'you cannot be serious'"
"You have demonstrated nothing"
"I completely disagree.
Good day to you sir!"
@heydonworks
Effortless Style
By heydon
Effortless Style
- 24,306