CSS: The Good Parts

In March I wrote about some of my least favourite parts of CSS. Admittedly, that was a pretty negative post, and I’ve even slightly changed my opinion of a few of those things, thanks to the comments.

But I like CSS a lot. So as a follow-up, I thought it would only be fair to list some of the things in CSS that I think work very well and thus are valuable to know and use often.

Media Queries

Whoever thought up this idea is a genius. Media Queries are at the heart of the responsive design movement and they make writing cross-browser CSS fun again. They let us focus on flexibility of design that isn’t device-specific, but instead allows us to adjust the look and size of the layout depending on the size of the screen.

Overall, a very good part of CSS.

Classes

Classes are fantastic. You could write your entire stylesheet using classes for 95% of your selectors (which you should be doing) and you would have an efficient, easy-to-maintain stylesheet.

Especially when you use multiple classes on a single element are classes super-useful, and when you combine that with chaining classes, they’re even more powerful.

Min-/Max- Width/Height

Even with all of IE’s annoying bugs, using properties like min-width and max-height has been a great gift to CSS. max-width is especially useful when you want to prevent your responsive designs from going super-wide on really large browser windows.

So take advantage of the good browser support for these four properties and use them to add the perfect amount of flexibility to your designs.

Inline-Block

Is it a div? Is it a piece of text? Is it a form element? Nobody knows! Well, okay, we know. But elements that are styled as display: inline-block have all the benefits of block elements (including full margin sizing and width/height support) but can flow with inline content and be subject to white space and the vertical-align property.

This is a great feature of CSS to remember for doing neat things with inline elements.

Relative and Absolute Positioning

Although they should not be overused for fear of making a layout unmaintainable or inflexible, using and understanding relative and absolute positioning in CSS is essential to improving your CSS skills.

So if you don’t yet use positioning tricks in your layouts, then you’re missing out on a very easy and more or less cross-browser way to get things looking good.

Fixed Elements and Backgrounds

I think it’s safe to say this one was popularized by the granddaddy of all CSS galleries, css Zen Garden. Two of my favourites on there include Retro Theater (which scrolls credits like on a movie screen around fixed elements) and Mozart (which uses background-attachment: fixed to fix the background in place while the page scrolls).

I definitely think fixed backgrounds are not used enough nowadays and can open up a lot of creative possibilities.

Line Height

What would we do without this one? The line-height property has great browser support and can even be used to center elements vertically. But best of all, it allows us to make pages readable and attractive. So use it abundantly along with other typographic CSS properties.

Pseudo-Elements

Do I even have to explain this one? Well, if you’ve been living under a rock or if you’re new to CSS then definitely check out this roundup, this archive, and my introductory tutorial on the subject.

Transitions and Transforms

Although not all in-use browsers support them, and you still need all the vendor prefixes, combining transitions with transforms is a very nice addition to CSS.

Not only does this combo relieve us of the need for bloated jQuery scripts and plugins, they also degrade nicely. Thus, if a browser doesn’t support them, the user will just see static elements and he’ll be none the wiser.

@font-face

Web fonts are better now than they’ve ever been. Yes, the syntax for cross-browser web fonts is complicated and has a long evolutionary history. But with services like Google Fonts and Font Squirrel’s generator, web fonts have never been easier to use.

Easy One-Line Comments

In my “bad parts” post, one of the things I described was the fact that CSS doesn’t allow a double slash for comments the way other languages do. Well, that doesn’t mean you can’t do easy single-line comments. You see, browsers will ignore any line or block of CSS that they don’t recognize, so you could easily comment out a line or a block by putting a double forward slash (or really any random characters) at the start of any line of CSS.

I wouldn’t allow such comments to go into production code, but it can certainly be handy to quickly add a character to a line (or even a selector) just for temporary testing purposes, rather than having to add “/” and “/” to every block you want to comment out.

box-sizing: border-box

The standard box model was one of the “bad parts” in the previous post, so it’s only natural that this one is a “good part” of CSS. And it is. Paul Irish explains how good it is, so I won’t go into the details here.

And best of all? IE8 supports it. So if you’ve dropped support for IE6/7, then you’re ready to use this and make recalculating widths and padding a thing of the past.

Attribute Selectors

Although these have bugs in a lot of older browsers, overall they’re pretty safe to use.

They can come in handy when targeting HTML that you have no access to (and thus can’t add a class or ID to) and you can even use them to target elements with data attributes, which are custom attributes that you create yourself.

What Are Your Favourite Parts of CSS?

This list doesn’t include a lot of new CSS3 features; for many of those, the jury is still out on whether they will be useful and perform well. And poor browser support (specifically IE7/8), in my opinion, rules out many of them as being laballed “good parts” just yet.

But I’m sure you have your own personal favourite parts of CSS — so post a comment if there’s anything valuable you feel I’ve missed.