>> Good evening, everyone, can everyone hear me?
Over here is the mic working?
Excellent.
My name is Katie Fenn, I'm going to be talk to you today about writing modulus style sheets
with CSS.
Before I start, a quick content warning.
In case animation on the slides makes you feel slide or comfortable, there's a content
warning on the bottom right that will appear before animation appears on the screen.
Also, all the links and slides that I'm using in my talk will appear in the URL in the bottom
left.
And that will stay on screen throughout just in case you need it.
So why do we need another build tool?
We've got less, we've SaaS and grunt and -- why do we need more tools in front-end?
It's about this.
It's the shed global scope.
What we call this NCSS.
All of our styles share the same environment, one rule can overwrite another rule.
Just like rubbish released into the scene near it can have catastrophic consequences
for islands in the Pacific and that makes our site brittle and vulnerable to change.
Sharing isn't trivial task.
We have no guaranteed that shared from another term or third party will work with our code.
And developers are trying to build complex websites by building them like flat pack furniture.
You reusable components that can be copied and combined as we want to.
And methodology such as atomical design have -- building websites out of those reusable
components such as form fields, headings, and buttons.
Meanwhile we discovered the benefits of modular JavaScript.
And with tools such as Node.js and Web PAC and also shared a problem with the shared
global scope.
And we developed ways around this and developing patterns and tools that allowed us to use
code and script only where we needed it modularly.
It gave us safe rock pools to write our code in instead of the scary scared -- scary ocean
of global scope.
So that's what CSS modules does for CSS.
Giving scoping to CSS and taking it out of that shared global scope making stars local
by default.
And it's not only a single tool, it's a format developed by the community and a series of
build tool plugins that support it.
So how do you write CSS module?
Just like this.
If you've seen CSS before, it looks just like normal CSS.
Except the stars are local by default.
Your style sheet is a process by CSS modules plugin, which works a little bit like SaaS.
It will read in your source code and transform it to make it something slightly different.
And the difference is it will append a unique hash onto the end of your class names making
them unique.
And this hash is generated from the class name and the file pass of the file.
Meaning two rules cannot overwrite each other even if they share the same class name.
In fact, it's not unlike the block element modify naming scheme that some of you may
have used.
Except in this case the plugin does the hard work so that you don't have to.
You don't have to spend up time coming up with names for blocks and elements.
It will do the work for you.
If you need a class for a button, name it a button.
If you need a class for a label, name it a label.
It will do the rest.
You can then load styles into your templates like a codependency.
And this provides an object that maps your unique class names back to the original so
that you can use them easily in your code.
So I've put together a really quick demo of this in action.
This is a really simple Web form based on CSS modules.
I've got UE components for text fields and UE components for the button.
If I change the style for the text field and run my tax runner -- I've gotten ahead of
myself.
If I change the board property on the class board input, and you run the task runner,
and run the CSS modules plugin, the UE -- the styles for the text field will update.
So far straight forward.
This is completely reasonable, given what we already know in CSS.
But if we change the button -- if we change the styles for the button field, you can see
I've reused the class name input.
Now, normally what would happen here is it would overwrite for other elements that are
using that class name.
But with CSS modules, that doesn't happen.
So if I change it to something completely different, the button will have a completely
different border style.
And the reason that this is happening is that CSS modules is making those classes unique.
If you can't see what's happening there, we've got the original input -- we've got the original
input class name, and it's being appended by that unique hash.
Styles cannot automatically overwrite each other anymore.
So if you want to try it yourself, all the code for my demo is up on my GitHub profile.
But that's also in the link at the bottom.
So you don't need to copy it down.
CSS modules also has further features for going further.
It has features for composing styles from different classes, for reusing code.
And it does that without the same problems of bloating style sheets that you might have
seen if you've used less or SaaS.
If you need to use global CSS that works like normal, that's also no problem at all.
There are features for switching off the scoping selectively.
You can also use it with your existing build chains as well if you've used LaaS and SaaS.
So how do you start using them today?
If you're making a website or Web application with JS, Webpack is probably the way you want
to go.
Web pack is a modular bundling tool for JavaScript.
What sets it apart from the older bundling tool such as required JS, it's extensive API
for loading and transforming files, which CSS modules uses.
CSS modules also implemented by the CSS lowered plugin.
So if you want to start using it today, and you're already using Web pack, that's the
plugin you want to use.
If you're not using JavaScript, and I know a lot of people in the room won't be using
JavaScript, post CSS is a preprocess similar to SaaS.
And it also has an API for transforming style sheets.
It has a wide range of plugins available for adding some of the features that you've seen
in other preprocesses such as nesting, styles, mixins, and variables.
And CSS modules will work alongside these.
It's really useful for building if you're using the PHP, Python, and Ruby platforms.
So it's not a complete use if you're not building a single page Web application in JavaScript.
So this is what it's all about.
So this is what I think CSS module's key benefit.
Unique classes that can't be overridden mean that your UE components can encapsulate their
styles.
Only they need to know how those styles work, which is a better way of sharing code than
fragmented separate bits of styles.
Your home page team can build components but your checkout team can reuse without anyone
needing to know how the styles work.
So quick shout out to my employer for paying for the time for me to be here today.
We're hiring, so if you're local, come and say hello.
And thank you very much.
[Applause]