Code less – care less!
With Atomic CSS

Code less – care less!
With Atomic CSS

  1. Ideal setups gone bad
  2. Functio-what?
  3. Reality Check

1/3

Ideal setups

Frontend: What's your my ideal
process like?

What's your my ideal process like?

Concept loves spreadsheets

Content inventory – Donna Spencer, 2010

What's your my ideal process like?

Components! Patterns! Styleguides!

From Pages to Patterns – Charlotte Jackson, 2015

Interface Inventory – Brad Frost, 2013

What's your my ideal process like?

Naming!

Naming!

  • What’s in a name – Andy Clarke, 2004
  • Naming Things – Paul Lloyd, 2014
  • Long Names Are Long – Bob Nystrom, 2016
  • How to name things – Peter Hilton, 2014
  • Sass Color Variables That Don’t Suck – Landon Schropp, 2014
  • Difference between container and wrapper – Enrico Bacis, 2012

What's your my ideal process like?

Wireframe? Right.
But what's the content vs display structure?

Content vs. Display Patterns – Dan Mall, 2015

Remember that there is a whole talk on these subjects coming up later

No problem.

Content vs. Display Patterns – Dan Mall, 2015

Content vs. Display Patterns – Dan Mall, 2015

1/3

Ideal setups gone bad

Ideal setups gone bad

  1. That finalestest-final2b.sketch design
  2. Structural mutations, concept pivots
  3. Longterm maintenance
  4. Big team communication

Ideal setups gone bad 1/2

Assumption-driven

  • lack of communication / documentation
  • too opaque
  • “object oriented” eg. blackboxed architeture
  • blurry specs

Ideal setups gone bad 2/2

Driven by good intentions

  • too many comm. channels / overdocumented
  • too permeable
  • teams trying to support other areas:
    self-censorship, extra work
  • overly focused on details

Why I No Longer Use MVC Frameworks
– Jean-Jacques Dubray, 2016


“I don’t even argue anymore. Projects end up with a gazillion APIs tied to screens that change often, which, by ‘design’ require changes in the API and before you know it, you end up with lots of APIs and for each API many form factors and platform variants.”

On Style Maintenance – Sarah Drasner, 2016

“I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess.

I want a code janitor. […] This is the person you want on your team. This is a person you want in your code reviews.”

Css and Scalability – Adam Morse, 2016

“Eventually, I stumbled across this class of code.

.left {
    float: left!important;
}

I saw this class and thought – well at least you know what it does.”

2/3

Functio-what?

Let’s Define Exactly What Atomic CSS is
– John Polacek, 2017

“The term ‘Atomic CSS’ was coined by Thierry Koblenz […]. Some people started referring to this approach as ‘Functional CSS’ some time later. […] today the terms Functional CSS and Atomic CSS are used interchangeably.”

Functional Programming, CSS, and your sanity
– Jon Gold, 2016

“Functional programming is infectious. I find it beautiful & elegant in much the same way as a Braun watch or Karl Gerstner’s grid system for Capital magazine.”

Functional Programming, CSS, and your sanity
– Jon Gold, 2016

“Functional programming is infectious. I find it beautiful & elegant in much the same way as a Braun watch or Karl Gerstner’s grid system for Capital magazine.”

Sounds rather lofty, right?

Functional programming?

  • Immutability
  • Scoping
  • Typing
  • Konrad Zuse?
  • ƛ-calculus?
  • Entscheidungsproblem?
  • Referential Transparency?

Functional programming?

… so I asked people who studied this sort of thing about some of these code examples and their answer was:

Functional programming?

… so I asked people who studied this sort of thing about some of these code examples and their answer was:

“Still not Haskell-in-CSS”

Functional programming?

  • Immutability
  • Scoping
  • Typing
  • …

Immutable CSS – Harry Roberts, 2015

“It turns out that immutable objects are objects ‘whose state cannot be modified after [they have been] created’. That’s exactly what we’re aiming for with certain types of rule in our CSS! After we’ve created certain rulesets, they want to behave almost like constants: never changing, closed to modification, immutable.”

Immutable CSS – Harry Roberts, 2015

… meaning paraphrased:

Cascading Style Sheets

Fine.

Fine. So what is this about then?

So what is this about then?

Drop object / component semantics.

So what is this about then?

Start coding literal.

(drum roll)

Start coding literal.

Sometimes,
“21px bold yellow” only means
21px bold yellow.

 

Start coding literal.

Sometimes,
“21px bold yellow” only means
21px bold yellow.

(gasp!)

Shed.css

<button
  class="
    d:i-b f-w:700
    p-x:3 p-y:.7 b-r:.4 f:2
    c:white bg:blue
    t-t:u
    hover/bg:blue.9
  "
>
  Log In
</button>

Custom project

<a href="/cta" class="
  uf17-button
  uf17-font-18 uf17-radius-50
  uf17-bg-black uf17-color-white
  uf17-hover-bg-yellow uf17-hover-color-black
  uf17-active-bg-red
">
  Kick me!<span class="icon icon-foot"></span>
</a>

WYSIWYG?

More like: MYOB.

Want to move around the element outside of the component?

Want to move around the element outside of the component?

No Problem – MYOB.

You want to change the button states again?

You want to change the button states again?

No Problem – MYOB.

Iterating the styleguide in production?

Iterating the styleguide in production?

MYOB.

Dropping half of your concept?

Dropping half of your concept?

MYOB.

3/3

3) Reality Check

Reality Check: Classitis

<a href="/cta" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-black uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Kick me!<span class="icon icon-foot"></span></a>

Reality Check: The accompanying CSS

.uf17-bg-yellow,
.uf17-hover-bg-yellow:hover:not(:active),
.uf17-hover-bg-yellow:focus:not(:active),
.uf17-active-bg-yellow:hover:active {
  background-color: #f9e504;
}

Reality Check: Use Template Languages

Reality Check: Use Template Languages

<a href="/cta" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-black uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Kick me!</a>
<a href="/foo" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-red uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Kick me, too!</a>
<a href="/bar" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-black uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Kick me, again.</a>
<a href="/stuff" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-yellow uf17-color-black uf17-hover-bg-black uf17-hover-color-yellow uf17-active-bg-red">Kick me!</a>
<a href="/to" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-black uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Did I mention? Kick me!</a>
<a href="/come" class="uf17-button uf17-font-18 uf17-radius-50 uf17-bg-black uf17-color-white uf17-hover-bg-yellow uf17-hover-color-black uf17-active-bg-red">Klick me!</a>

So you need a CSS utility library?

Exceptions to your rule when handling states:

“In a responsive website, utility classes tend to get overwritten more than it should. It brings many questions regarding the workflow […] I find his articulation a bit light when it comes to the shift he made.”

—commenter “Dan” on So you need a CSS utility library?, 2017

Reality Check: Code footprint – 2010

file changed size
template.html 2010-09-26 4KB
layout.css 2010-10-01 4KB
skin.css 2010-10-03 15KB

Reality Check: Code footprint – 2017

file changed size
template.html 2017-09-29 7KB
layout.css 2010-10-01 4KB
atomic.css 2017-09-15 3KB

Thierry Koblentz’ closing words

Atomic CSS

“No, the idea does not come from ‘a new wave of engineers who’ve recently become interested in the front-end’; I’m not part of the new wave and have no engineering background. On the other hand, I believe I have a good grasp of CSS.”

– Thierry Koblentz on opinions below Let’s Define Exactly What Atomic CSS is

☂
MYOBCSS

Thank you!

Florian Stolzenhain, October 2017

Slides? www.stolzenhain.net/slides/atomic-css

Questions? feedback@stolzenhain.net

Additional Research by

Dipl-Inf Claudia Breschkow
Movie Train Wrecks and Crashes Episodes 1 to 16