CodeinWP CodeinWP

CSS: The Good Parts

CSS: The Good PartsIn 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.

12 Responses

  1. Scott says:

    My two favourites that you haven’t mentioned:

    1. nth-child(even) for zebra striping tables.
    2. Custom Unicode glyphs for lists.

  2. Paul says:

    I know you said about transitions and transforms but I’m going to have to add CSS animations to this list.

  3. Larry Botha says:

    Sibling selectors are awesome when coupled with labels and inputs for custom radio buttons, checkboxes, and even some display/show magic!

  4. Ralph says:

    @Larry Bitha, I agree! Show/hide with sibling selectors is sooooo cool and easy. Combine it with some CSS3 transitions, transforms or animations and you’ll have indeed magic. Here is an awesome demo what you also could do with the general sibling selector (~) in combination with ‘infinite’ transition delays.

    http://dabblet.com/gist/2076449

  5. Ferdy says:

    My favorites are the new CSS3 styles that drastically reduce the need for images: border-radius, box-shadow, text-shadow, gradients, etc. They’re fun to use, flexible and quite often its not a deal breaker that old IE can’t cope with them.

    As for your remark on what we “should be doing” concerning the use of class selectors, I couldnt disagree more, but that’s an entirely different discussion. I think OOCSS as a solution is worst then the problem itself, and SAS/LESS in combination with basic front-end tuning tools is a vastly superior, cleaner and more maintainable way to about things.

  6. austin says:

    as mentioned border-radius and nth-child is awesome, also web fonts are pretty cool
    selectors in general…they are so awesome and so powerful they have found there way into javascript (querySelector and querySelectorAll which are also frikken awesome)

  7. Chris Ota says:

    first-child elements are also an important part because they allow users to style elements without having to add unnecessary classes or IDs and work in IE7. Too bad last-child doesn’t.

    I also agree with nth-child (odd/even).

    More reasons to love CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

    Too bad so many of them don’t work in IE7.

  8. Carlos López says:

    inline-Block indeed is a wonderfull wonder!!!

    a single inline-block for all divs made a before horribly looking page for any web browser that wasn’t IE just perfect

    What would had been weeks of tweaking making those pages work on Chrome, FireFox, Safari and Opera, one single command fixed them up in a second!!!

  9. David Nemes says:

    box-sizing: border-box its a gift, completely changed the way I/We write CSS.

  10. Good summary, Louis. I love all kinds of pseudo-classes. Although they have a pretty poor support, they make the webdesigner’s life a lot easier – especially in Safari centered Apps.

  11. Hi. I must say your all selectors are awesome. You had done a great work. But i also agree with Scott that You had missed the mentioned two selectors.

  12. Alex Simitsis says:

    box-sizing of course, and custom checkboxes and radio-buttons, which help us do great things using :checked pseudoclass..

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).