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 am here to talk to you about Scalable and Modular Architecture for CSS.
In this installment I'll be talking about project organization.
With project organization, when we look at modularizing our code,
we have a number of benefits.
One is improved testing and also the ability to build blocks that allow for rapid prototyping.
One of the ways we can do this is to break down the files that we have.
You might be used to a project having a single file, like a style.css or a main.css
where everything is in one big massive file with headings at each point.
That can work well for small projects,
but for larger projects or certainly with projects with multiple people working on them,
breaking it down into smaller chunks just works better.
As you can see here, I have a number of different file names.
For example, I've got my base.css that might include my base styles,
I've got my layout.css that may include my main layout styles,
I could certainly have another one like a grid.css.
I have my states in a state.css for any of my global states,
and then I might have specific module files like btn.css or modal.css.
Now, why have I broken everything down like this?
We have some great benefits for doing this.
One is prototyping,
the fact that I can now test individual states for individual modules.
I can say what does a button look like and only include the CSS for the buttons
and see what that looks like by itself and then test individual states.
What does this variation look like?
I can also review localization.
I can say what does this component look like in English, French, Spanish,
but certainly in Russian, German, or Asian languages,
and I can see what those things would look like
and what effect it's going to have on the module.
And it allows us to isolate dependencies.
So by separating the concerns for each individual component,
it's really easy for us to develop a template
and test that template in isolation from everything else.
Now, in a project, especially one where you're creating a file for each individual module,
you could certainly have a project that could easily balloon to 20, 30, 40 different CSS files.
I definitely don't recommend including separate link statements for every single one
or even using import statements because each of those requires a separate HTTP request.
Performance-wise, that's awful.
So what we want to do is combine those into a single file.
There are a couple different ways that we can do that.
One of them is we can use something like a combo handler.
A combo handler is really nice in that what it means is that from a production perspective
I can take all my individual files and push them onto the server,
and then the combo handler allows something like JavaScript
or even just to say from the HTML that these are all the individual CSS files,
make that as a single request, and pull them in.
On Yahoo! Mail, for example, we actually pull in only a certain chunk of CSS
when the user needs it.
So when they first load it up and they're looking at their inbox,
we're only pulling in the CSS that they need to view their inbox.
Things for menus, modal dialogs, or even search isn't included
until the user actually requests those.
So from a performance perspective, things are really fast.
We get everything that they need right off the bat and nothing that they don't need.
Not every other project is like that,
and you may still want to bundle everything up into a single request
that is requested as soon as the user comes to your application.
You could use something like a preprocessor like Less or Sass
to actually manage bundling those all up into your production files.
So as you can see, with project organization, by modularizing things the way we have,
we can make things easier to test, easier to prototype,
and fine-tune the performance like we did with Yahoo! Mail.
[SMACSS - http://smacss.com] If you'd like to learn more, check out smacss.com
or the rest of this series.
[ADOBE DEVELOPER CONNECTION]
[whirring sound - metallic ringing]
