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.
In this installment I'll be talking about state-based design--
in particular, changing state with JavaScript.
So when it comes to changing state, one of the key things is to avoid setting inline styles.
Traditionally, what we've done is used JavaScript to handle animations
or make things appear by actually modifying the inline styles
by setting, for example, something to display block that was originally displaying none.
Those are the types of things that we want to try to avoid.
One of the ways we can do this is just add a class
where we can grab an element and, using something like jQuery,
say addClass('is-hidden');
If you've seen the previous parts of this series,
you'll notice the is naming convention here.
We're just saying is this element hidden? Yes, it is.
If you're using the DOM, the document object model,
we can actually take advantage of the class list,
which is widely supported, with the exception of Internet Explorer,
and we can just say grab the element, grab the class list, and then add 'is-hidden'.
Of course we can still use the classic el.className =,
but that's always a concern about adding or removing where there's other existing classes.
It's always good to use a library like jQuery to manage our particular projects.
Sometimes there are situations
where we actually have multiple states on a particular element.
So for example, here I have a modal dialog.
That modal dialog, however, might be enabled, it might be disabled,
or it might be hidden altogether.
Having to manage those different states using JavaScript
can actually be a little bit complicated
because then you're always having to worry about removing classes
in order to add them again.
So for example, if I want to make sure it's enabled,
I'm going to have to go through and make sure that the disabled
or the hidden classes are not applied before I actually add the enabled class.
A way around that is to actually use an attribute.
In this case I've used HTML5 data attributes in order to store a particular state.
This actually makes JavaScript management a lot easier.
So for example, from the CSS perspective then I can have my .modal
and indicate the different states using attribute selectors
where I'd say data-state=enabled or data-state=disabled or data-state=hidden.
And then from a JavaScript perspective, if I'm using something like jQuery, I can just say
el.attr or attribute and then the name of the attribute--in this case data-state--
and then setting whatever that particular state is, whether it's enabled, hidden, or disabled.
And it's really easy because all it's going to do is override the existing state.
And I also don't have to worry about any of the other classes
that are on that particular element.
Of course if I'm using the document object model, I can use setAttribute and getAttribute--
in this case setAttribute, data-state, and whether it's enabled, disabled, or hidden.
So as I mentioned at the beginning of this,
JavaScript is often used for managing animation.
Of course browsers have evolved a lot in the last couple of years
and are continuing to evolve where they support things like CSS transitions and animations.
We want to rely on those to manage the animated states and state changes.
[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]
