Meta Refresh 2016

The web in your pocket

Rico Sta. Cruz


The modular future of CSS

Submitted Aug 30, 2016

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


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] ( (2012) — This tells us to think of your CSS in layers: base, layouts, modules, and states

  • [BEM] ( (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] ( — 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.


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.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more