HTML and CSS Reference
In-Depth Information
to style an element. You can also do this with a slew of JavaScript methods, and honestly, it's
the same basic process with a different syntax (one of my JavaScript ah-ha moments). Being
able to natively access HTML from JavaScript
and from CSS
is one of the reasons
progressive enhancement has been such a successful development model. It allows a point of
reference to guide us and to serve as a reminder as we develop a project, so we don't “
cross
the streams
”
.
2
But, as you move forward with JavaScript and build applications with highly interactive
elements, it gets harder to not only keep HTML out of your JavaScript, but also to catch
yourself before injecting style information into a document. Of course, the case for not injecting
style with JavaScript certainly isn't a binary one (yes/no, true/false, 0/1); there are plenty of
cases where you might need to apply styles progressively, for example, in a drag and drop
interface where positioning information needs to be constantly updated based on cursor (or
finger) position.
But generally speaking,
you can safely house all the style information you need within
CSS
and reference styles as reusable classes. This is a much more flexible model than
sprinkling CSS throughout a JavaScript file, and it very closely compares to the model of
adding style information into your HTML. We follow this model when it's only HTML and CSS,
but for some reason it has a tendency to fall apart once JavaScript gets added into the mix. It's
certainly something we need to keep an eye on.
A lot of front-end developers take real pride in having clean HTML. It's easy to work with, and
to certain super-geeks it can even be artful. It's great to have clean, static HTML, but what
good is that if your generated HTML is riddled with injected style and non-semantic markup?
By “generated HTML,” I'm referencing how the HTML looks after it's been consumed and
barfed back up after being passed around all those plugins and extra JavaScript. If step one to
having clean HTML and separated progressive enhancement layers is to not use a
style
attribute, I'd have to say that step two is to avoid writing JavaScript that injects a
style
attribute for you.
CLEANING UP YOUR HTML
We can probably all agree that blindly using a technology is a terrible idea, and I think we're at
a point with jQuery where we are, indeed, blindly using a lot of the features without fully
understanding what's going on under the hood. The example I lean on pretty heavily for
keeping CSS out of my JavaScript is the behavior of jQuery's
hide()
method. Based on the
principles of progressive enhancement, you wouldn't code something with inline CSS like this:
