Effortless Style

Complaints dept: @heydonworks

My Summer Job

In Situ

GENEVA

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

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

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

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

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

AXIOMS MEAN INHERITANCE

Victoria can include
web components easily

<x-map data-key="6c86bb5b30a442c180772d978f3ae000"/>

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) 

<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:"]

 [href^="http:"]:not([href*="this-domain.com"])

Really Effortless Style

Style without elements or classes or attributes or pseudo-content or javascript

## ROCK & ROLL

↓

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

Self-correcting

GRIDS

:nth-child(3n+1):nth-last-child(2)

:nth-child(3n+1):nth-last-child(2),

:nth-child(3n+1):nth-last-child(2) + *

 ~

 

 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