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

(photo: justjimwilldo)

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:first-of-type

p:first-child

p + p

p:first-child:first-letter

WITHOUT EFFORT

*

The "Leftover Glue" problem

The lobotomized
owl selector

* + *

A "relationship" 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.