10 Principles of the CSS Masters

When it comes to CSS, there are lots of resources and supposed “expert tips” on the web. These are from unproven, self-proclaimed “gurus” who have no street cred in the design world. While they may have valid points, how is one to know whether a CSS tip is a valid resource or just an untested hack?

Instead of relying on unknown sources for advice, let’s look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

Below are 10 excellent principles that any web developer or designer can find useful, meaningful, or challenging. Consider this sage advice from journeymen (and women) who have walked the long, hard road of design excellence. These are the true masters of CSS. Drink deep from their knowledge and take their wisdom on your next designing adventure.

1. Keep CSS simple – Peter-Paul Koch

What bothers me most about the mindset of CSS hackers is that they are actively searching for complicated solutions. Seek and ye shall be found, if you want complexity it’ll take you by the throat. It’ll never let go of you, and it won’t help you, either.

Peter-Paul Koch is a godfather of web development. While he’s an old-school developer and the bulk of his web portfolio was between 1998-2002, he’s worked with the likes of Apple and other heavyweights. He’s written a book on javascript, but don’t think for a second he doesn’t have anything to say about CSS.

The danger of CSS hacks

Koch has addressed something that every designer and web developer should follow with zeal: Keep your CSS simple. Simplicity is a hard thing to achieve, especially in CSS design. There are a myriad of CSS hacks that one can find for making all browsers look the same, regardless of version or type. Yet there’s a fundamental flaw with using many CSS hacks. As web browsers evolve, it’s much harder to keep up with the changes.

Koch makes an interesting point about developing for the web. The Internet as as whole is a very unpredictable place, and trying to second-guess the way it will work in the future is a very bad strategy.

The Web is an uncertain place. You’ll never be sure that your Web sites will work in the exact way you want them to work, not even when you apply all modern insights from CSS, accessibility and usability. Instead of seeking false comfort in hacks that seem all the more comfortable because of their complexity, you should accept uncertainty as a basic principle.

Browsers don’t have perfect CSS support; especially for people who’ve just started learning CSS, that can be infuriating. Nonetheless CSS hacks are not the solution. Acceptance of the way the Web currently works is the best way to go because it’ll keep your sites simple.

Peter-Paul has hit on something that rings true for not only CSS, but for web development as a whole. Simplicity is key for efficiency in coding.

2. Keep CSS declarations in one line – Jonathan Snook

Jonathan Snook is an incredibly popular designer from Ottawa, Canada who’s made his name in web standards and design. He’s spoken at prestigious conferences like SXSW and has published quite a few technical resources on design through Sitepoint.

One of Jonathan’s tenants to coding CSS is to keep declarations in one line.

The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

Jonathan goes on to give an example for single line declarations that looks like this:

Good

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Bad

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

Not only does this approach help with quickly scanning your CSS, it also helps in keeping your CSS file smaller by removing unneeded spaces and characters.

3. Use CSS shorthand – Roger Johansson

Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Roger Johansson knows a thing or two about designing for the web. The Swedish web designer has been working on the Internet since 1994, and has a popular web design blog. When it comes to simple and elegant solutions, Roger is one of the most knowledgeable in his field.

Johansson has a very in-depth article on the importance of CSS shorthand, and gives quite a few examples of how to use it while coding CSS. Here’s an example:

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

But this is much more efficient:

margin:1em 0 2em 0.5em;


The same syntax is used for the padding property.

While CSS shorthand reduces the size of the stylesheet, it also helps organize and keep the code simple. Beautiful CSS is simple CSS.

4. Allow block elements to fill space naturally – Jonathan Snook

Mr. Snook has another piece of crucial advice that every web developer should live by: allow block elements to fill space organically. If there’s one recurring theme in CSS development, it’s to not force the code to do things it isn’t meant for. This means avoiding CSS hacks and finding the simplest solution possible.

My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.

Jonathan’s rule of thumb is great for ensuring that your layouts won’t break and that the simplest approach is used when creating layouts with block elements.

5. Set a float to clear a float – Trevor Davis

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too.

Trevor Davis may not be as big of a name as Zeldman or Snook in the design world, he surely deserves some mention just based on his excellent portfolio of web layouts. His blog is an excellent resource for any web developer wanting to brush up on his design chops.

Clearing floats

In Trevor’s flagship article The 6 Most Important CSS Techniques You Need To Know, he’s added a nugget that can save many headaches when using columns in your layouts.

I have created a simple page with two floating columns next to each other. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to set the containing element to float. But now, you will see that the container background doesn’t contain the content area.

Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty div set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty div.

6. Use negative margins – Dan Cederholm

Sometimes it’s easier to deal with the exception to the rule, rather than add declarations for all other elements around it.

Dan Cederholm’s company SimpleBits is a powerhouse of a design company. Dan’s worked with the likes of:

• Google
• Blogger
• MTV
• Fast Company
• Inc.com

… and many other high-profile web companies. Fortunately, Dan passes on some of the knowledge he’s learned working with these massive names on his blog at SimpleBits. Here’s a rule of thumb for you web designers and developers: If Dan Cederholm says anything, you listen. Think of him as a digital sherpa, guiding you to the crest of your design mountain.

Negative margins

While it may seem counterintuitive to put a negative in front of any declaration (like margin-left: -5px), it’s actually quite a good idea. Mr. Cedarholm explains that using negative margins on elements are sometimes easier than having to change every other aspect of the design to make it align they way you want.

There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.

You can see his example of proper negative margin usage here.

7. Use CSS to center layouts – Dan Cederholm

“How do I center a fixed-width layout using CSS?” For those that know, it’s simple. For those that don’t, finding the two necessary rules to complete the job can be frustrating.

It’s no surprise that Dan is going to make this list twice. Centered layouts are on the surface a very simple idea, but for some reason they don’t always work as easily as advertised. Centering layouts with CSS can be a frustrating endeavor for a beginner if they’ve never tried it before.

Dan’s got a tried-and-true method that he uses frequently to achieve centered-layout nirvana.

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Many modern designs rely on centered layouts, so using this method will at some point come in handy for web developers and designers.

8. Use the right DOCTYPE – Jeffrey Zeldman

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

Jeffrey Zeldman is one of the co-founders of the excellent resource site A List Apart, co-founded and ran The Web Standards Project, runs the Happy Cog design studio, and even wrote the book on designing for web standards. In short, Zeldman is in the upper-echelon of web designers.

DOCTYPE misunderstanding

The DOCTYPE of a web page is one of the most overlooked aspects of design. Using the right DOCTYPE is crucial, and Zeldman explains why.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

Zeldman stresses the importance of a) actually using a DOCTYPE, and points out that you have to add an url in the declaration like so:

If you’re finding unexplained problems with your layouts, odds are the DOCTYPE could be the problem.

9. Center Items with CSS – Wolfgang Bartelme

Centering items is a frequent task when designing websites. But for people that are new to CSS it’s mostly kind of enigma how to center for example a whole website in browsers other than IE.

Wolfgang Bartelme is a web designer with Bartelme design, a web design firm. Bartelme has one of the most elegantly-designed blogs, and continually creates excellent icon and design work. He’s done design work for the blogging platform Squarespace, as well as the popular software event MacHeist.

Wolfgang has created a tutorial that helps with the complicated task of centering elements with CSS. Centered elements are insanely useful, but are sometimes hard to achieve given the design. Bartelme’s tutorial ensures centered alignment by choosing the right DOCTYPE and making adding his CSS voodoo. The code nothing fancy and gets the job done, and falls directly in line with striving for simplicity in CSS.

10. Utilize text-transform commands – Trenton Moss

Trenton Moss knows web usability. He has his own web usability company that trains people in usability training and web writing. He also writes for sites like Sitepoint. Trenton gives excellent tips based on his experience as a web usability expert.

It’s a simple fact that designs change over time, especially in the way text is displayed on websites. The best thing a web designer can do is plan for the future to make sure that instead of having to manually change the way text is displayed, it’s best to use CSS to change the appearance of the text. Trenton Moss shows us how to achieve this through the use of a simple, underused CSS command called text-transfom.

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

By using CSS to display the appearance of text on the site, it allows for change in the future and keeps things consistent over time.

This command is incredibly useful to help ensure consistency in style across an entire Website, particularly if it has a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won’t show up on the Website.

While text-transform is a small thing to add to add to a css layout, it can make a world of difference in the future when changes need to be made.

• Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

Glen Stansberry is a web developer and blogger who’s struggled more times than he’d wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.