Every other week, even though I have been working with CSS for years,
I learn something new about it. Some method, trick,or just some mistake I use to make and would like to inform other developers, so they won’t make the same mistakes I did.

This is naturally because CSS is an ever evolving, constantly changing way for us to give some skin to the skeleton which is HTML.
So I’ve decided to collect some nice tips and write them all in one article,
hope you’ll find them useful:

  1. Firebug/Console

    image00
    (firebug)
    image04
    (console tools)

    If you’re still not familiar with Firebug (on Firefox), or the Developers Console (on Chrome), you should be.
    First released in 2006, Firebug has revolutionized the way front end developers and web designers work.
    Being able to instantly see the changes you make on CSS, having the debugging power of an IDE for Javascript, and analyzing exactly how many requests are being made when your page is loaded, not to mention what might be making the page load slowly, truly made developing fast and clean websites incredibly easy & fast.

  2. Float or Inline-Block?
    That is the question

    When designing a website, you usually see things like:image06
    As you can see, we have 3 columns.
    There are a few approaches for dividing a page into columns.
    Some of us might remember a time when we had to use Tables to make such design possible.
    The days of tables are, of course, long gone, and the most popular option you see is using Float:left

    1
2
3
4
5
6
7
8
9

    </pre>
<div class="”wrapper”">
<div class="”col”">...</div>
<div class="”col”">...</div>
</div>
<pre>
.col {
float:left;
}

    The problem is, the Wrapper div will not have any height in this case, regardless of the size of the child divs, which is problematic if it has a background color for example.
    To fix this problem, one usually uses Clearfix.

    What is Clearfix?
    Clearfix is used to make sure the Wrapper div will have the proper height, instead of 0 pixels. The HTML will look like this:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    </pre>
<div class="”wrapper”">
<div class="”col”">...</div>
<div class="”col”">...</div>
<div class="”clearfix”"></div>
</div>
<pre>
.clearfix {
clear:both;
}

    Now the “Wrapper” class will have the proper height.
    You can also use the pseudo-class :after (more about this on tip #8)
    There’s another way, which seems to be favored by some on StackOverflow, and that is display:inline-block.
    So instead of giving float:left, it is replaced with display:inline-block.
    This works and is quite useful because you don’t need the Clearfix element,
    but it might be problematic if you want to combine boxes on both the left and the right side of your page (which can be done by float:left and float:right accordingly).
    In case you want all objects to align to the Center or Right, you just have to make sure that the Wrapper object has the attribute text-align:center or text-align:right accordingly.

  3. Using CSS animation whenever Possible

    a few weeks ago I’ve written an article about using CSS3 Transitions to replace JavaScript animations.
    The reason to use CSS animations instead of Javascript, is that browsers are (or will be) rendering CSS animations better than JS ones, and there’s a unified way to do them, whereas in JS you can implement animations in a thousand different ways.

    there are a lot more ways to animate with CSS, and for complex animations I would definitely recommend cssanimate.com

  4. Connect your Labels to your Inputs already!

    Too often you see websites like this:

    image02
    I’m all excited to fill the “Favorite Pokemon” field with "Ash Ketchum"
    (for those who don’t remember, he was Pikachu’s Pokemon), but clicking on the Label
    doesn’t do anything! I have to click directly on the field, like some animal!
    Whenever adding a label to your input, make sure it’s connected to it by giving it “for=input_id”, example:

    1
2

    <label for="pokemon">Favorite Pokemon</label>
<input id="pokemon" type="text" name="fav_pokemon" />

    When the label is connected, the browser will focus on the input when the user is clicking the label, as it should.

  5. Spiriting everything
    (well, almost everything)

    Spriting is the fine art of combining multiple images (usually small things, like Icons, Buttons & Borders), into a single file in order to reduce the time it takes for your page to load.
    A good example can be found on hire.kidsil.net (tooting my own horn over here).
    I have 6 icons for different social networks (and for this blog), and that was a perfect opportunity to make a sprite image that holds all of them:
    image03
    You can make sprites on your own, but there are also websites that do it automatically.
    After creating the sprite, you simply give all the icons the same background-image, and play around with background-position, general CSS:

    1
2
3
4
5
6

    #social-media a {
width: 32px;
height: 32px;
display: inline-block;
background-image: url('social.png');
}

    Specific for each button:

    1
2
3

    #social-media #twitter_link {
background-position: 0 164px;
}

    and so on for the rest (with different positions obviously).

  6. Avoid resizing images whenever possible

    This is pretty much a no-brainer, but if you have a large image, and you’re just showing a small thumbnail on your website, just resize the file instead of resizing it via CSS.
    This would save a lot of wasted loading time for your users.
    Wordpress (and many other CMSs) does this automatically.

  7. Use max width and height to preserve image ratio

    If you’re building a general template for your website, or a gallery with lots of images with different sizes, you might want to resize them using CSS.
    But what happens if some of the images have bigger Width than Height, and some are the other way around? You don’t want them to look squeezed because the ratio is not preserved.
    The solution? using max-width or max-height to limit the image size, and still let the browser resize it while preserving the ratio, here's the bad way to do it:

    1
2
3
4

    img {
width:200px;
height:400px;
}

    result:
    OLYMPUS DIGITAL CAMERA

    with max-height and max-width:

    1
2
3
4

    img {
max-width:200px;
max-height:400px;
}

    result:
    OLYMPUS DIGITAL CAMERA

  8. Take advantage of :before and :after

    On tip #2 I talked about using Clearfix.
    There’s another way of getting the same result using the float method without adding unnecessary HTML elements.
    Using the same HTML from tip #2:

    1
2
3
4
5
6

    </pre>
<div class="”wrapper”">
<div class="”col”">...</div>
<div class="”col”">...</div>
</div>
<pre>

    1
2
3

    .col {
float:left;
}

    All you have to do is add the following CSS:

    1
2
3
4
5

    .wrapper:after {
content: ' ';
clear:both;
display:block;
}

    And the Wrapper div will have the right height without a Clearfix element.
    This would work on all sane browsers, and on IE 8+.

  9. Shorthand CSS

    Making CSS as concise as possible, most people know that instead of writing:

    1
2
3
4
5
6

    .class {
 margin-top:5px;
 margin-right:10px;
 margin-bottom:15px;
 margin-left:20px;
}

    you can simply write

    1
2
3

    .class {
 margin:5px 10px 15px 20px;
}

    There are a lot more shorthands, just a few examples:

    Colors
    Some might know that #FFFFFF can be replace by #FFF, but the actual shorthand is
    #RRGGBB -> #RGB .
    This means, you can also replace colors like #99CCDD -> #9CD
    which gives a lot more options than previously thought.

    Borders
    The following CSS:

    1
2
3

    border-width: 1px;
border-style: solid;
border-color: #FFF;

    And this:

    1

    border: 1px solid #FFF;

    Will produce the same result.

    Background
    The following CSS:

    1
2

    background-color:darkgray;
background-image: url(img.png);

    Is the same as:

    1

    background:darkgray url(img.png);

    Whereas the longer, more complete version would be:

    1

    background:darkgray url(img.png) repeat top left scroll;

  10. SASS

    A few weeks ago I wrote an article called Writing CSS faster with SASS, not to mention making it even more readable and elegant.
    There’s not much to add on this front, but I’d highly recommend using SASS, especially in big and complex websites.
    There are some interesting SASS frameworks out there, such as Gumby, which I’m currently learning.
    Gumby has some amazing features and extensions like Background Parallax, and Shuffling Div order depending on Screen size, good stuff!
    There’s even a SASS powered version of Bootstrap, if you’ve already invested too many hours with Bootstrap to learn something new.

I hope you've learned some new tricks reading this article, until next time!