Click on any phrase to play the video from that point.
[whirring sound - metallic ringing]
[ADOBE DEVELOPER CONNECTION]
[Jonathan Snook - Designer, Shopify] Hi. My name is Jonathan Snook,
and I'm here to talk to you about Scalable and Modular Architecture for CSS.
So what is Scalable and Modular Architecture for CSS?
I like to call it SMACSS for short because that is a bit of a mouthful.
But looking at what does scalable mean,
in this case scale can apply to a number of different factors--
for example, scaling with larger projects.
If you're working on something the size of Yahoo or Google or Facebook,
there's a lot of templates, a lot of CSS,
and trying to manage that can get really unwieldy,
especially when you're working with larger teams
or necessarily needing to scale across multiple projects.
So when we're looking at scaling a project,
one of the ways to do that is to modularize our code.
And so modularizing allows us to simplify the CSS that we're writing
and to rethink how we're coding.
Within SMACSS is a number of different concepts.
One of them is categorization.
Categorization is thinking about the role that a piece of code plays within our project.
We look at naming convention.
Naming convention clarifies an intent via a consistent approach.
When you look at server-side languages like PHP and Java,
there is already an established naming convention,
so when new developers come on to a project they understand exactly what's going on.
CSS has lacked this in the past, and one of the things SMACCS tries to do
is describe a naming convention that can really make projects clearer for yourself
and for other developers coming in to a project.
And it's also what I consider a state-based design,
and that is that we have a project and a page with a number of different elements on it
that might consist of different modules or layouts
and representing those different components in different states.
We can do that via classes, pseudo-classes, and media queries.
Of course this is just a brief overview. [SMACSS - http://smacss.com]
I invite you to check out the rest of the series or learn more at smacss.com.
[ADOBE DEVELOPER CONNECTION]
[whirring sound - metallic ringing]



