{"id":516,"date":"2008-08-27T09:20:37","date_gmt":"2008-08-27T16:20:37","guid":{"rendered":"http:\/\/www.bspcn.com\/2008\/08\/27\/10-principles-of-the-css-masters\/"},"modified":"2011-01-11T08:22:48","modified_gmt":"2011-01-11T15:22:48","slug":"10-principles-of-the-css-masters","status":"publish","type":"post","link":"http:\/\/localhost\/wordpress\/2008\/08\/27\/10-principles-of-the-css-masters\/","title":{"rendered":"10 Principles of the CSS Masters"},"content":{"rendered":"

Written by Glen Stansberry<\/a><\/p>\n

\"\"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?<\/p>\n

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.<\/p>\n

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<\/em> masters of CSS. Drink deep from their knowledge and take their wisdom on your next designing adventure.<\/p>\n

1. Keep CSS simple – Peter-Paul Koch<\/h3>\n

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.<\/p><\/blockquote>\n

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<\/a>, but don’t think for a second he doesn’t have anything to say about CSS.<\/p>\n

The danger of CSS hacks<\/h4>\n

Koch has addressed something that every<\/em> designer and web developer should follow with zeal: Keep your CSS simple<\/a>. 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.<\/strong><\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p><\/blockquote>\n

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<\/strong>.<\/p>\n

\"\"<\/p>\n

2. Keep CSS declarations in one line – Jonathan Snook<\/h3>\n

Jonathan Snook<\/a> 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<\/a> and has published quite a few technical resources on design through Sitepoint<\/a>.<\/p>\n

One of Jonathan’s tenants to coding CSS<\/a> is to keep declarations in one line.<\/p>\n

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.<\/p><\/blockquote>\n

Jonathan goes on to give an example for single line declarations that looks like this:<\/p>\n

Good<\/strong><\/p>\n

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}<\/p>\n

Bad<\/strong><\/p>\n

h2 {
\nfont-size:18px;
\nborder:1px solid blue;
\ncolor:#000;
\nbackground-color:#FFF;
\n}<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

3. Use CSS shorthand – Roger Johansson<\/h3>\n

Most people know about and use some shorthand, but many don’t make full use of these space saving properties.<\/p><\/blockquote>\n

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<\/a>. When it comes to simple and elegant solutions, Roger is one of the most knowledgeable in his field.<\/p>\n

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

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.<\/p><\/blockquote>\n

While CSS shorthand reduces the size of the stylesheet, it also helps organize and keep the code simple. Beautiful CSS is simple CSS.<\/p>\n

\"\"<\/p>\n

4. Allow block elements to fill space naturally – Jonathan Snook<\/h3>\n

Mr. Snook has another piece of crucial advice that every web developer should live by: allow block elements to fill space organically<\/a>. 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.<\/p>\n

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.<\/p><\/blockquote>\n

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.<\/p>\n

\"\"<\/p>\n

5. Set a float to clear a float – Trevor Davis<\/h3>\n

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too.<\/p><\/blockquote>\n

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<\/a> of web layouts. His blog<\/a> is an excellent resource for any web developer wanting to brush up on his design chops.<\/p>\n

Clearing floats<\/h4>\n

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

I have created a simple page with two floating columns next to each other<\/a>. 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<\/a>. But now, you will see that the container background doesn’t contain the content area.<\/p>\n

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<\/a>. In this case, I just use an empty p set to clear: both. Now, there are other ways to clear a float without markup<\/a>, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty p.<\/p><\/blockquote>\n

\"\"<\/p>\n

6. Use negative margins – Dan Cederholm<\/h3>\n

Sometimes it’s easier to deal with the exception to the rule, rather than add declarations for all other elements around it.<\/p><\/blockquote>\n

Dan Cederholm’s company SimpleBits<\/a> is a powerhouse of a design company. Dan’s worked with the likes of:<\/p>\n