A reminder for why to use ems for font-size, line-height and space in CSS

The advantage to using ems for font size, line height, and spacing between elements is that as text size is adjusted, those measurements will adjust proportionately.

Source: http://www.slideshare.net/LRyder/best-practices-and-css

Concept of collapsing margins

CSS is a strange beast, and typically the behaviour of margins can be a little strange to beginners. Over seven years old, this article from Andy Budd, No Margin for Error, is still a good read for the CSS newbie:

At it's core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one "collapses" to nothing.

Applying OO principles to CSS

 

One of the frustrating aspects of coding CSS is the ad-hoc approach in crafting styles. It felt all my software development practices went out the window. Compass, a stylesheet authoring framework, along with Sass, a stylesheet language, has alleviated most of my pain. However, implementation still varies from developer to developer.

I have refined my approach to focus on styling content elements first (e.g. H1, ul, p tags), the grid, and finally the chrome (e.g. backgrounds). While this approach has worked quite well, I'm still not completely satisfied on the reusability of the "chromed" elements. This is where Nicole Sullivan comes in, developer of the OO CSS framework. While a Compass implementation is in the works, I'm quite happy adapting the philosophy of the framework to may current workflow. Specifically the 10 Best practices she outlines in her presentation Object Oriented CSS:

1. Create a component library
2. Use consistent semantic styles
3. Design modules to be transparent on the inside
4. Be flexible
5. Learn to love the grid
6. Minimize selectors
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple classes
10. Use reset and fonts from YUI

Practices 7 and 8 need more explanation. Below are comments from Nicole's blog post announcing the framework hosted on Github.

Separate structure and skin

Abstract the structure of the block from the skin which is being applied.

Separate structure from skin isn’t about HTML and CSS. Within the CSS, have one class that takes care of all of the little presentational elements, browser differences, basically all the complicated bits. Then build on that class with multiple skin classes, which then only need to contain simple things like border colors, background images, etc. The skins become super predictable.

 

Separate container and content

Break the dependency between the container module and the content objects it contains.

A glance at the CSS of most sites will tell you no one is doing this properly. At best we manage to separate by module, or sandbox individual components. Unfortunately, each of the modules has container and content completely tied together. This makes the CSS grow over time and the site not scale or perform well.

Her nine pitfalls are also worth noting:

1. Location dependent styles
2. Avoid specifying what tag a class applies
3. Avoid IDS to style inside the main content areas
4. Avoid drop shadows and rounded corners over irregular backgrounds
5. Don't sprite every image together (unless your site has very few pages)
6. Avoid height alignment
7. Text as text, not as images
8. Redundancy
9. Avoid premature optimization

Nicole's presentation is well worth watching if you intend to adopt such a framework, or simply wish to improve you CSS authoring skills. I have included the video of the presentation below along with the slides. Here are some helpful links if you wish to research further:

• OOCSS.org
• Github Repository and Wiki
• OO CSS Google Group
• 5 Mistakes of Massive CSS (Video)
• 5 Mistakes of Massive CSS (Slides)

Object Oriented CSS

Slides

Object Oriented CSS

View more presentations from Nicole Sullivan.

Collapsing Margins in CSS

This is one of those rudimentary behaviours in CSS that I need to be reminded of once and a while. Top and bottom margins from adjacent elements will collapse. The element with the larger margin will prevail.

Basic HTML Template for Designers to create a Style Guide

When I start a new front-end project coding HTML/CSS I will ask the designer to provide a style guide to outline the typography used through the website. I find when I mark-up the CSS for the typography first, before starting the grid, the overall CSS is cleaner. How do you communicate what elements need to be in the style guide? Well there are some basic elements such as headers, forms and table that I provide in a HTML file that the designer can start with. Then additional typography elements, such as typography in sidebars and call-to-actions are added to the style guide. Are there any elements you think need to be included in my basic HTML file? I like to keep it relatively simple so I don't add things like definition lists, but perhaps I should. Let me know.

IE7 CSS Madness

Inspired by blogs such as Pivotal Labs and Rails Test Prescriptions I am going to attempt to do a daily recap of yesterday's firsthand experiences. These are going to be short, brief posts. I was going to call it simply Standup but I thought it would be nice to tie the company name in. So here it goes:

Internet Explorer 7 CSS Madness

Yesterday I was thrown into cleaning up some front end CSS for IE7 late in the afternoon. Here's some tricks for kids:

• The drop-down of a select element in HTML does not expand it's width to display the longest option. Fixed using a JQuery plugin ie-select-width. There is also ie-select-style that allows you to style the select element.
• IE7 does not play nice with transparent PNG's and the  jQuery Cycle plugin. It tends to acquire the background colour of the parent element. The fix is to add "background: none !important" to the element containing the PNG image in the slideshow.

Ask for help: background-image disappears on Internet Explorer 7 when in a div with float

I came across a strange CSS bug with IE 7 today. When I have a container that is floating and I use a text replacement technique the image does not show. Remove the float and it does. Or alternatively remove the DocType and it also works.

Browsing the 'net I haven't managed to find this bug. Have you come across this before? Do you have an explanation?