Act 1: The problem

A brief introduction to answer the question, “Why is writing CSS so hard?”

A brief history — how have we been building CSS over the years? It used to be easy to write CSS (pages were simpler then), but we’re still using the same CSS as our apps have gotten more complex.
Where things break down — Let me walk you through how developers are often frustrated by CSS. Typically, it’s because people write them wrong.

Act 2: Existing solutions

Let’s have a look at how others have solved this problem. I’m going to walk you through some popular solutions, and let’s find out what they have in common.

OOCSS (2011) — One of the first few (CSS systems. Tells us to build sites “like Lego.”
[SMACSS] (https://smacss.com) (2012) — This tells us to think of your CSS in layers: base, layouts, modules, and states
[BEM] (http://bem.info/) (2013) — It takes SMACSS’s ideas and makes a convention out of it.
React (2014) — We’ve been building websites as components. It’s a natural extension to the component-style thinking.

Act 3: Think in components

It seems the common theme here is to building your UI as components. Here’s some more on the matter.

[Atomic design methodology] (http://atomicdesign.bradfrost.com/) — It tells us to think of your site content in components (“molecules”) that are comprised of smaller components (“atoms”).

Act 4: What’s next?

It seems the common theme here is to building your UI as components. Here are some recent projects that extend that line of thinking.

[RSCSS] (http://rscss.io/) (2015) — It takes BEM and makes a better naming convention from it. I’m the author of RSCSS, so I’ll probably say a lot here.
[Web Components and Shadow DOM] (https://www.w3.org/wiki/WebComponents/) — A proposal to have first-class support for components.
CSS @scope — a proposed extension to the HTML standard.
[CSS modules] (https://css-tricks.com/css-modules-part-1-need/) — Devs have been writing React with “CSS modules”: CSS that’s scoped to a certain element.

Meta Refresh 2016