HTML and CSS Reference
In-Depth Information
display
:
none
;
}
In the above example, you can see that even though both classes result in content being
removed from view, they function very differently from an accessibility standpoint. Looking at
the code like this makes it clear that we really are dealing with style information that belongs in
a CSS file. Using utility classes in this way can not only help your JavaScript slim down, but
also have double usage in an Object Oriented CSS (OOCSS) development model. This is truly
a way to not repeat yourself
(Don't Repeat Yourself, or DRY) within CSS, but also across a
whole project, creating a more holistic approach to front-end development. Personally, I see a
lot of benefit in controlling your behaviors this way, but some people have also called me a
control-freak in the past.
WEB AND TEAM ENVIRONMENTS
This is a way we can start opening up lines of communication between CSS and JavaScript
and lean on the strengths of each language without overdoing it. Creating
a developmental
balance on the front end is very important
, because the environment is so fragile and we
can't control it like we can on the back end with a server. If a user's browser is old and slow,
most of the time you can't sit down and upgrade it (aside: I do have my grandmother using
Chrome); all you can do is embrace the environmental chaos, build for the best and plan for
the worst.
Some people have argued with me in the past that this style of development, where you're
referencing CSS classes in JavaScript, doesn't work well in team development environments
because the CSS is usually built by the time you're diving into the JavaScript, which can cause
these classes to get lost in the mix and create a lot of inconsistency in the code (the opposite
of DRY). To those people I say: poke your head over the cube wall, open AIM, GTalk or Skype,
and communicate to the rest of the team that these classes exist specifically to be used with
JavaScript. I know the concept of developers communicating outside of GIT commit messages
seems like madness, but it'll be okay, I promise.
Using Behavioral CSS With JavaScript Fallbacks
Using these CSS objects as hooks for JavaScript can go far beyond simple hiding and
showing of content into an area of behavioral CSS, transitions, animations and transforms that
are often done with JavaScript animations. With that in mind, lets take a look at a common
interaction model of fading out a
div
on click, and see how it would be set up with this
