The modular future of CSS

This submission has been added to the schedule

The modular future of CSS

Submitted Aug 30, 2016

Section: Full talk Technical level: Intermediate

“CSS is broken”—or Is it? Let’s learn about writing CSS without losing your sanity by rethinking the way we look at CSS styling. In this 30 minute talk, we’ll dig into how many developers have solved their CSS woes using modular thinking.

In this talk, we’ll learn about:

A brief history of semantic CSS — a recap on the rise of CSS positioning, and the evolution of the “separation of style content.”
Today’s CSS conventions — a look on how we’re solving these issues today with the help of SMACSS, BEM, and RSCSS.
Thinking in modules — let’s explore the core methodology of modern CSS: breaking apart interfaces into modular pieces.
The future of modular CSS — an exploration of current and upcoming technology of how we’re pushing forward the ideas of modular CSS.

Outline

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.

Requirements

An open mind.

Speaker bio

Rico Sta. Cruz is the web developer/designer behind many popular open source JavaScript libraries in use today. He is one of the top contributors at GitHub, host of JSConf Asia 2013, and the head organizer of the Philippine JavaScript community Manila.js.

Meta Refresh 2016