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






      "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