The Importance of Complementary Skills

Published August 26, 2009 by CSS Newbies.

Orange, Pear, Apple by Joe Lencioni. Used under a Creative Commons license.

If you’ve been a reader of CSS Newbie for any length of time, I’m sure you’ve noticed that not all of my articles are directly related to CSS. I also talk about HTML, JavaScript, content management systems, ecommerce solutions, and other related skill sets and areas of expertise.

This is for many reasons (for starters, I’d get bored otherwise!), but the main overarching rationale is that these areas of expertise are all complementary. Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential.

This means these skills are just as important as the CSS my site’s name suggests you’ll learn. Read On…

New to CSS? New to CSSnewbie? Start Here!

Published July 9, 2008 by CSS Newbies.

I get a great many reader comments that read something like this: “Your site is the best CSS resource on the web (okay, maybe I’m embellishing slightly here), but where do I start if I’m new?” And that’s a fantastic question. If you’re new to the site, it can be tough to find your way around at first. So here is a collection of articles to get you started. I’ve broken them down into two categories: articles for true CSS newbies, and articles for people new to CSSnewbie, but with an understanding of CSS.

New to CSS

If you don’t know much about CSS at all, but would like to, here is where you want to start. I’ve tried to put them in an order that makes sense, but feel free to click around as you see fit.

New to CSSnewbie.com

So where should you start reading if you’re new to the site? Well, that’s largely subjective depending on your interests, but here are a few articles that a lot of people have found interesting in the past.

And if those articles don’t whet your whistle, don’t forget to check out the article categories listed in the sidebar. That’s a great way to find a lot of information fast, if you know what it is you’re looking for.

If you have other articles you’ve read on this site that are favorites, or articles that you think are essential to the beginning CSS master, please don’t hesitate to mention them in the comments. I’d be more than willing to add things to either list.

Also, I’ll be adding a link to this article to the sidebar once it has cycled off the front page. That way, future generations can bask in our collective wisdom.

Combating Classitis with Cascades and Sequential Selectors

Published March 10, 2008 by CSS Newbies.

stethoscope

There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too. It looks a little something like this:

body {
	font-family: Arial; }
h1 {
	font-family: "Times New Roman"; }
h2 {
	font-family: "Times New Roman"; }
p {
	font-family: Arial; }
p.ArialRed {
	font-family: Arial;
	color: red; }
p.ArialRedBig {
	font-family: Arial;
	color: red;
	font-size: 150%; }
ul {
	font-family: Arial; }
ul.ArialRed {
	font-family: Arial;
	color: red; }
strong.redArial {
	font-family: Arial;
	color: red; }

This particular snippet of (completely fictional) horribly afflicted CSS suffers from multiple problems which could all probably be considered symptomatic of Classitis, even when they don’t directly involve classes. I’ll go through the five of the most glaring problems and how to remedy them below.

The Cascading ability of CSS is ignored. Notice how many times the “font-family: Arial;” rule is applied? This is a waste of space, and ignores the fantastic cascading ability of CSS (which I’ve covered elsewhere). Once the appropriate font family had been applied to the body tag (the first rule in our example), all of the additional “Arial” family declarations, because they were identical and were inherited from this first declaration, became redundant.

Simple and identical rules are repeated.
Take a look at the rules for the <h1> and <h2> tags in the example above. They use a different font-family than the body tag, so it’s appropriate that they have a rule making that change. But why repeat the rule twice? With CSS, you’re allowed to list sequential selectors, separated by a comma. Instead of the rule above, we could’ve written this:

h1, h2 {
	font-family: "Times New Roman"; }

Different classes have an identical effect. Consider the rules “ArialRed” and “RedArial” above. They do exactly the same thing, but the designer was in such a hurry, they accidentally created two rules that mirror one another. Always stop and consider when you’re writing your CSS if there’s any way to consolidate your rules. If you have to write the same rules multiple times, the answer is probably “yes.”

Classes are applied to multiple elements. There are two instances of the “ArialRed” class in the example above. One is being applied to a paragraph tag, while the other is being applied to an unordered list. There’s no need for this redundancy. By eliminating the “p” and “ul” portions of the two selectors, those classes can be consolidated into a single instance.

Class names are super long. This is the classic symptom of Classitis from whence the name derives, much like how chicken pox is named after the chicken-shaped virus that causes it (no? Well, you figure it out then). Designers sometimes get in a hurry and start building classes for every possible design difference they encounter. This can most easily be combated by remembering two things:

First, as I’ve mentioned before, elements can have multiple classes. Instead of having a class of “RedBig,” why not break it into two classes? Then you can style elements that need both classes like this:

<p class="red big">
  This text is now red and big.
</p>

Second, classes should describe what an element does, not what it looks like. A class of “red” is great when you’re first building a site, but what happens three months down the road when you decide that you want your emphasized text to be blue? A class of “.highlight” or something similar to indicate the text should stand out in some way would have been more appropriate. Of course, even seasoned developers tend to break this rule every once in a while.

So, after we apply all of the advice offered above, what are we left with? Something that looks a little like this:

body {
	font-family: Arial; }
h1, h2 {
	font-family: "Times New Roman"; }
.highlight {
	color: red; }
.shout {
	font-size: 150%; }

Ahh… nice, healthy CSS, without all of the bloating Classitis inevitably causes.

Of course, these are just a few of the pitfalls of redundancy and excess that designers can fall into when developing their CSS. If you can think of others, share them in the comments.