
Smashing Magazine we smash you with the information that will make your life easier. really.
70 Expert Ideas For Better CSS Coding
By Smashing Editorial, May 10th, 2007 in CSS | 421 Comments | Forum
CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.
We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.
And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.
We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects - you name it - really appreciate it.
You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects.
Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurício Samy Silva.
1.1. Workflow: Getting Started
- After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
- Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
master.css @import url("reset.css"); @import url("global.css"); @import url("flash.css"); @import url("structure.css");<style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style> - Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]
- Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e.
<p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller]CSS: .width100 { width: 100%; } .width75 { width: 75%; } .width50 { width: 50%; } .floatLeft { float: left; } .floatRight { float: right; } .alignLeft { text-align: left; } .alignRight { text-align: right; } - Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.
1.2. Organize your CSS-code
- Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your
reset.css,global.css,flash.css(if needed) andstructure.cssand on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”h2 { } #snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px "Verdana", sans-serif; } #main_side h2 { color: #444; font: bold 14px/14px "Verdana", sans-serif; } .sidetagselection h2 { color: #fff; font: bold 14px/14px "Verdana", sans-serif; } - Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
/* -----------------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* -----------------------------------*/
- Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]
- Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
body { background: #fdfdfd; color: #333; font-size: 1em; line-height: 1.4; margin: 0; padding: 0; } - Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples:
/* Structure */,/* Typography */etc.” [CSS Tips and Tricks] - Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]
- Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]
1.3. Workflow: Handling IDs, Classes, Selectors, Properties
- Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr]
- Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing]
- Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook]
- Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]
- Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
# /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */
- Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a
parent_childpattern. [10 CSS Tips] - Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon]
- Group selectors with common CSS declarations. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson]
- Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]
- Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano]
- Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven]
- Use Your Utility Tags:
<small>,<em>and<strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]
1.4. Workflow: Use shorthand notation
- Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:
#000 is the same as #000000, #369 is the same as #336699[Roger Johansson] - Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; } - Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
- You can use shorthand properties. “Using shorthand for
margin,paddingandborderproperties can save a lot of space.CSS: margin: top right bottom left; margin: 1em 0 2em 0.5em; (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
CSS: border: width style color; border: 1px solid #000;
CSS: background: color image repeat attachment position; background: #f00 url(background.gif) no-repeat fixed 0 0;
CSS: font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
1.5. Workflow: Setting Up Typography
- To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the
font-sizeis 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook] - Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
- You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
h1 { text-transform: uppercase; } - You can display text in small-caps automatically. The
font-variantproperty is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.h1 { font-variant: small-caps; } - Cover all the bases - define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
p { font-family: Arial, Verdana, Helvetica, sans-serif; } - Use 1.4em - 1.6em for
line-height. “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafais a good one) and a dark gray (#333333, another good one).” [Christian Montoya] - Set 100.01% for the
html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]
1.6. Workflow: Debugging
- Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues.
div { border:1px red dashed; }works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use* { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]* { border: 1px solid #f00; } - Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]
2.1. Technical Tips: IDs, Classes
- 1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
- Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
- CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
- You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]
2.2. Technical Tips: Use the power of selectors
Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated).
- You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
div > strong { color:#f00; } - You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
p + p { color:#f00; } - You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:
[att] Matches elements that have an att attribute, regardless of its value. [att=val] Matches elements that have an att attribute with a value of exactly “val”. [att~=val] Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces. [att|=val] Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.
- The selector in the following rule matches all
pelements that have atitleattribute, regardless of which value it has:p[title] { color:#f00; } - The selector matches all div elements that have a class attribute with the value error:
div[class=error] { color:#f00; } - Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
blockquote[class=quote][cite] { color:#f00; } - You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]
2.3. Technical Tips: Styling Links
- Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (
<a name="anchor">) you’ll notice it picks up:hoverand:activepseudo-classes. To avoid this, you’ll need to either useidfor anchors instead, or style with a slightly more arcane syntax::link:hover, :link:active” [Dave Shea] - Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
a[rel~="nofollow"]::after { content: "\2620"; color: #933; font-size: x-small; } a[rel~="tag"]::after { content: url(http://www.technorati.com/favicon.ico); } - “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
- You can mark external links automatically. Many people make use of the non-standard
rel="external"relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]a[href^="http://"]:not([href*="smashingmagazine.com"])::after { content: "\2197"; } - You can remove dotted links with
outline: none;. To remove dotted links useoutline: none;:a:focus { outline: none; }
2.4. Technical Tips: CSS-Techniques
- You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
- You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
- You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
- You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
- You can set
<hr>to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices] - You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
XHTML: <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About us</a></li> <li><a href="#" class="contact">Contact us</a></li> </ul>
- Insert an
idinto the<body>tag. The id should be representative of where users are in the site and should change when users move to a different site section.CSS: #home .home, #about .about, #contact .contact { commands for highlighted navigation go here } - You can use
margin: 0 auto;to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]XHTML: <div id="wrap"> <!-- Your layout goes here --> </div>
CSS: #wrap { width:760px; /* Change this to the width of your layout */ margin:0 auto; } - You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
<?xml version="1.0" ?> <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> ...
- You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the
@importtrick. [Roger Johansson]@import "main.css";
- Always declare margin and padding in block-level elements. [10 CSS Tips]
- Set a width OR margin and padding. “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 Snook]
- Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
- Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
<link rel="stylesheet" type="text/css" href="print.css" media="print"> or <style type=”text/css” media=”print”> @import url(print.css); </style>
- This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]
2.5. Technical Tips: IE Tweaks
- You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]
#regular_logo { background: url('test.png'); width:150px; height:55px; } /* \ */ * html #regular_logo { background:none; float:left; width:150px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); } /* */ - You can define
min-widthandmax-widthin IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know]#container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); } - You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
Workflow: Get Inspired
- Play, experiment with CSS. “Play. Play with background images. Play with floats.” [Play with positive and negative margins. Play with inheritance and cascading rules. Play. [Chric Casciano]
- Learn from others. Learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work. [20 pro tips]
Sources and Related Posts
- CSS Tips and Tricks by Roger Johansson
- (The Only) Ten Things To Know About CSS by John Manoogian
- CSS Crib Sheet by Dave Shea
- My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
- CSS Tips by Philipp Lenssen
- Top CSS Tips by Jonathan Snook
- Ten CSS tricks — corrected and improved by Tantek Çelik
- Ten More CSS Trick you may now know by Trenton Moss
- CSS techniques I use all the time by Christian Montoya
- CSS Tip Flags by Douglas Bowman
- My 5 CSS Tips by Mike Rundle
- 5 Steps to CSS Heaven by Ping Mag
- Handy CSS by Lachlan Hunt
- Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
- 15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
- 10 CSS Tips You Might Not Have Known About by Christopher Scott
- A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
- Tips for a better design review process by D. Keith Robinson
- 20 pro tips - .net magazine by Jason Arber
- CSS Best Practices by Richard K Miller
- 10 Quick Tips for an Easier CSS Life by Paul Ob
- 10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
- Web Design References: Cascading Style Sheets by Laura Carlson
- Getting Into Good Coding Habits by Adrian Senior
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.
10 New PHP Content Management Systems
All based on PHP.
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated








wildan (May 10th, 2007, 8:50 pm)
wow.. it’s rockin’
Paul Enderson (May 10th, 2007, 8:55 pm)
Blimey - that’s one long post! :)
There’s some very good tips in there, and I look forward to printing the PDF version as a reference.
Nice one guys!
Mostafa Darwishzadeh (May 10th, 2007, 9:03 pm)
The Best Magazine! Best of best! i love smashing magazine dot com.
Smarty Blog (May 10th, 2007, 9:07 pm)
Excellent list, a must read for any CSS developer!
Scott deVries (May 10th, 2007, 9:39 pm)
Very helpful list - great job! I will definitely be using some of these for our next design project.
Daniel Anderson Tiecher (May 10th, 2007, 9:50 pm)
Really, REALLY nice article guys. You are always surpassing my expectations.
On a side note, may I translate this article in my native language? Giving credit where it is due, of course.
SEO Expert Blog (May 10th, 2007, 9:50 pm)
From an organisational point of view it’s a good idea to use different CSS files. For better performance one file would be better. If certains styles are used on certain pages only you could exclude these definitions from your default css file and include them as needed.
SvT (May 10th, 2007, 10:02 pm)
Thanks ;)
loops (May 10th, 2007, 10:16 pm)
Another gem, thanks for this nice list!
John Faulds (May 10th, 2007, 10:23 pm)
I think you should point out (in case people don’t bother to read the links provided) that a lot of the selectors you’ve mentioned (e.g. attribute selectors) don’t work in IE.
Haungo (May 10th, 2007, 10:27 pm)
Awesome Post! But I think you got some things switched around…
I believe this:
1. master.css
2. @import url(”reset.css”);
3. @import url(”global.css”);
4. @import url(”flash.css”);
5. @import url(”structure.css”);
should probably go in this section:
1.2. Organize your CSS-code
Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
Right?
zouzouwizman (May 10th, 2007, 10:32 pm)
Thanks a lot for this usefull compilation of good advices.
It saves me tons of times. It’s always difficult to find THE good hack or tip among the CSS Galaxy.
James Bridle (May 10th, 2007, 10:38 pm)
More good stuff from Smashing - cheers guys.
Otto (May 10th, 2007, 10:39 pm)
this post is not a post, it’s a book !!!
thanks thanks thanks for this list ;)
Mark Ford (May 10th, 2007, 11:07 pm)
Keeping a library of helpful CSS classes is a good idea, giving them names that represent their presentational qualities is a terrible one! What happens when you decide that everything with the class “width75″ is going to be 50% instead? ;¬)
Use class & id names that describe the contents function rather than presentation.
fab (May 10th, 2007, 11:56 pm)
what an amazing post!!!!
absolutely stunning!!!
Bart Noppen (May 11th, 2007, 12:04 am)
You should not use
* { border: 1px solid #f00; }to debug since borders are handled different across browsers. Instead add a background-color to the element(s) wich appear buggy.Benni Austin (May 11th, 2007, 12:12 am)
I wholeheartedly disagree with using a classname with a name like .width100 or .floatLeft. This goes against keeping styles and content apart from one another. If you give a className that is named after what it looks like, rather than it’s function on the site, you are not separating them, and may as well do this:
MrJ (May 11th, 2007, 12:29 am)
I’m sorry, but this just isn’t very good. You’re recommending ‘techniques’ which I have to fix almost every day from other developers - applying font styles on the p tag? Terrible idea. What if I’ve made a content managed site and the client enters text that isn’t in p tags? Default browser font style, thats what. Multiple stylesheets are messy and cause confusion… ‘declare margin and padding on all block elements’ - no… divs don’t have margin and padding so why… what is the point in that… CSS selectors are CSS3 and not widely supported, so shouldn’t be relied upon: input[type=text] {wah..} will not work is IE6 and below…
I need to write my own CSS articles cos I’m sick of reading ‘expert’ tips from people who just don’t understand the implications of what they’re doing.
Famous Photos (May 11th, 2007, 12:36 am)
some of the advices above are trivial :) If you are a beginner in CSS you could find this article a good pointing start.
Nagaman (May 11th, 2007, 12:46 am)
Ok, so how about the differences between CSS1 and CSS2?
ZenBug (May 11th, 2007, 1:17 am)
Keep a library of helpful CSS classes. Since you can use multiple class names (i.e. …), make use of them for your markup.” [Richard K. Miller]
That’s terrible advice.
Instead, name your selectors according to the content to which they apply, not their appearance. That is after all the whole point of CSS: you can alter the appearance in the style sheet later without touching the markup.
If you later decide to change the width of all elements assigned the class width100 to 200, then the selector name width100 would look pretty asinine.
…Or would you have me create a new class with the selector width200 and a width value of 200, then go through the markup and replace every instance of width100 with width200? That would be completely contrary to the spirit of CSS.
Rich Owings (May 11th, 2007, 1:25 am)
How about a post on CSS for beginners?
Jon (May 11th, 2007, 1:35 am)
I found this tutorial pretty useful. I’m working on a somewhat complex css centric project (http://www.websiteusermaps.com/) that relies heavily on CSS combined with Yahoo’s YUI JS libraries. I’ve had to implement a ton of CSS all by hand and I can see where the techniques you’re describing here can make my CSS code better. Thanks for the excellent post!
Cheers,
Jon
AZNaddict (May 11th, 2007, 1:40 am)
It’s a very nice tutorial, I just wish you had one for beginners :)
Darren (May 11th, 2007, 1:41 am)
Good attempt but many of what is mentioned isn’t the best advice for those aiming for support in many browsers. Many of the ‘techniques’ are rather new and havn’t been implemented into all browsers as of yet. It does however demonstrate how easy and powerful CSS can be when used correctly.
Sam Wilson (May 11th, 2007, 1:46 am)
Having just finished CSS Mastery, it’s awesome to have this to bookmark especially for some of those finer CSS points which can save or cost me a few hours here and there. Thank you.
Wolf (May 11th, 2007, 2:07 am)
I believe this post will cause more confusion for a beginning web designer than anything else. I would recommend beginning web designers to get out and buy ‘Web standards solutions’ by Dan Cederholm and ‘Designing with Web Standards’ by Jeffrey Zeldman. After you’ve read those two books (ignoring most of the parts where they speak about ‘older browsers’, the older browsers in these books are not relevant anymore, besides Internet Explorer 6) you’ll have a much better understanding of designing for the web than these tutorials can give you.
Each of these articles contradict the others and there’s no line to be found - no wonder beginning web designers are confused beyond mankind.
Ben (May 11th, 2007, 2:12 am)
Excellent compilation. Thanks for putting it together.
jack (May 11th, 2007, 2:34 am)
p class="floatLeft alignLeft width75"is just wrong! It goes against nature of css. What if that paragraph needs to be aligned or floated different in redesign? Then you have to change it in html or change .floatLeft class in css to float:right :) Don’t give people wrong advices.jack (May 11th, 2007, 2:35 am)
Oops, I just saw this last comment from ZenBug that says exactly what I said :)
Mei (May 11th, 2007, 2:54 am)
I also have to chime in on point 1.1.4, it goes against the whole point of CSS.
Garrett Dimon makes the point nicely in 1.3.7 - any reason why you included both tips?
Kyle Anderson (May 11th, 2007, 3:24 am)
Another great one guys! I started reading your articles when you did the 35 Designers x 5 Questions and look forward to every article.
It’s also nice to see one of my articles linked up there, Master Stylesheet: The Most Useful CSS Technique.
Well, just wanted to leave a comment here and say thanks for your great articles and keep ‘em coming!
dingding (May 11th, 2007, 3:27 am)
p class=”floatLeft alignLeft width75″ is just wrong!
No it’s not… it is absolutely correct from a technical standpoint. Beyond that, there is no right or wrong with style sheets. Period.
I for one think this is very clever if you do not want to handle a buttload of presets. You could easily name a fixed width ‘width_something’ and change that in the css-file if you have to do it globally.
Raquel (May 11th, 2007, 4:20 am)
Half of this article are tips that aren’t feasible because they don’t work cross-browser. Forget cross-browser, they don’t work in the world’s most popular browser. And when people point this out, they are getting buried.
Ron (May 11th, 2007, 4:27 am)
It is truly smashing! Yet another awesome post.
ReynerSibaja (May 11th, 2007, 5:07 am)
WOW .. amazing post!
Norbert (May 11th, 2007, 5:19 am)
Excellent article, but as usual one reading session won’t be enough :)
markus941 (May 11th, 2007, 5:20 am)
One of the best CSS tips roundups I’ve seen.
Thanks for putting it together.
Dugg and bookmarked.
Peter Gasston (May 11th, 2007, 5:28 am)
Re: 1.6. Using border can cause problems with layout, it’s better to use outline instead. Of course, this won’t work if you use IE - but then, what does?
All Diggs (May 11th, 2007, 5:39 am)
Excellent compilation.
Himm amazing post for newbie =)
Nikko (May 11th, 2007, 5:42 am)
Thanks Thanks ^_^ Excellent compilation.
NextRef (May 11th, 2007, 5:49 am)
Great ideas! :)
tndal (May 11th, 2007, 5:58 am)
This and the supporting article, “53 CSS-Techniques You Couldn’t Live Without”, are both proof that CSS truly simplifies HTML!-))
So that makes 53+70 = 123 more CSS tips that I should remember. Nice! Thanks, CSS guys. We really needed this badly. After all, I couldn’t get anything done with HTML alone.
jack (May 11th, 2007, 6:04 am)
@dingding: read my or Zenbug’s comment again - there are reasons for what we said.
p class=”floatLeft alignLeft width75″may be technically correct but it’s terribly wrong for all reasons people use css in the first place. i.e. font tag is also technically correct, but can you consider yourself a good web designer if you actually use it?Ardilla (May 11th, 2007, 6:28 am)
Don’t forget the 100e2r.
Link [www.informationarchitects.jp]
neil x (May 11th, 2007, 8:06 am)
Beautiful.
N.
Alex (May 11th, 2007, 8:29 am)
Yet again, thank you. Many of these i already use but there are a few i never thought of. Good job gathering it all.
airtonix (May 11th, 2007, 10:52 am)
um an EM is actually relative to the font-size of the nearest parent that has a specified font-size.
so if you set the body to have a 10px font size then 1em throughout your document will be sized relative to that 10px font size on the body element.
oh and yes function not form is what css is about, if you dont agree go back to font tags and editing 4,000 seperate pages for one H3 tag.
Scott (May 11th, 2007, 11:29 am)
What a great list. I have read or used many on the list, but it’s great to have this listed in one place.
gsuez (May 11th, 2007, 11:52 am)
Excelent tips!… The order is basic, fundamentals and smashing…
thanks guys, it`s a great idea!!!
noirhawk (May 11th, 2007, 1:32 pm)
Awesome article; it really helps makes things a lot less complicated and orderly.
Zek (May 11th, 2007, 3:56 pm)
Incredible advices here !
A must-read for all designers.
Yemenheiko (May 11th, 2007, 4:01 pm)
1.1. Workflow: Getting Started - Keep a library of helpful CSS classes.
That’s terrible! Read this:
Link [www.w3.org]
Yogi (May 11th, 2007, 5:36 pm)
Wow, well explained. Thanks
Markus (May 11th, 2007, 6:43 pm)
small error:
In 1.5 is written
“e.g. 1.3em is approximately 1.3px.”
but I think 1.3em is like 13px since 1em is appr. 10px
alex (May 11th, 2007, 8:56 pm)
Thank, i am sure that most of your advices i will be able to apply on the practice!
xaxaxa (May 11th, 2007, 9:23 pm)
what an amazing post!
Oskar L-B (May 11th, 2007, 9:30 pm)
Thanks a lot for this compilation! I snitched up some hints that immediately relieved my site of much extraneous CSS. Keep it coming!
Flávio Stutz (May 11th, 2007, 11:27 pm)
There would be a tool to verify and help developers apply those useful tips!
Thanks for the great compilation!
Ankit Agrawal (May 12th, 2007, 1:31 am)
Great Job…
Andrey Miroshnichenko (May 12th, 2007, 1:48 am)
Awesome article!
Gautam Mandewalker (May 12th, 2007, 2:45 pm)
Hi,
You guys are going a great job.
I case of any problems, i don’t refer a book neither
i go through any online documentation but i visit smashingmagazine.com.
I read that soon a PDF version of this article will be published, waiting for that.
Thanks for your great work.
Bob (May 13th, 2007, 2:40 am)
1.1 - Eric A Meyer has a Link [meyerweb.com], please update the article.
Vitaly Friedman & Sven Lennartz (May 13th, 2007, 5:06 pm)
Thanks, Bob. The link is updated.
Michał Stempień (May 13th, 2007, 5:40 pm)
Great, as always.
subske (May 13th, 2007, 7:39 pm)
Top CSS user feedback as it is good to see what other CSS uses are doing and that we allot of us arer all really starting to find the most efficient, neat and effective ways of using the technology. Have a couple of CSS tricks posted on my blog (well not many) but plan to add some more in the future so check it out if your interested Subske.com.
Bootstrapping Blog (May 13th, 2007, 9:58 pm)
Great post. Will help me out a lot in the future.
feng-shui (May 14th, 2007, 4:25 am)
man, i wish i had this type of reference when i first started out doing my freelance work. great article!
Tenwit (May 14th, 2007, 12:38 pm)
How about: whenever you specify either color or background-color, you must specify the other. Too often I visit sites that have specified background-color: white, but white is my foreground colour… gah!
Morgan Daly (May 14th, 2007, 3:41 pm)
Hello,
I am loving smashing magazine too.
Just wondering… near the beginning of the article all of these import style sheets are mentioned as part of a master stylesheet. I was wondering what the difference of these might be. What kinds of things each one might hold. I had sort of thought that reset.css and global.css would be pretty much the same?
Thanks
Stuart (May 14th, 2007, 5:27 pm)
I think this article is excellent on the whole - but you realy need to include a note in the section 2.2. Technical Tips: Use the power of selectors.
Child selectors and adjacent selectors ( > and + ) do not work in IE6, and therefore you cannot use them unless you know you are specifically not building a site for that browser. I know IE6 is a non standards compliant browser, and I hate it as much as anyone reading this post - however, it still has the lion share of the market and therefore must always be considered when building any site that is freely accessible through the internet.
Im not saying that you should remove this section as its excellent advice that people may not know about (and IE7 does support these so therefore they should be available to be used soon), just add a note about ie6 compatability.
andrzejk (May 14th, 2007, 5:34 pm)
Marvelous article!
Didn’t know about some of theese techniques. Now the work should be much easier ;)
Sam (May 15th, 2007, 10:42 am)
@jack and Zenbug: When mentioning
class="floatLeft alignLeft width75"the author clearly says “Useful for debugging, but should be avoided in the release version“. He is not suggesting that you write CSS like this for production (I agree, you shouldn’t) but merely that it is a useful technique while developing a web page. RTFA?st3ph (May 15th, 2007, 5:36 pm)
Very interesting post, thank you =)
Laurence (May 16th, 2007, 12:57 am)
I really like Smashing Magazine, I’m sad I came too late to enter the logo comp. This article was really good. It helped me a lot.
Carlos Eduardo (May 16th, 2007, 4:36 am)
I like that part that you talk about selectors… Thank you for this great article =)
Miquel (May 16th, 2007, 5:24 am)
1.6. Workflow: Debugging
* Add borders to identify containers
Oh man! Never do that. Use colors instead (brackground-color). You will avoid lots of problems.
Mac Sage (May 17th, 2007, 1:47 am)
This is greatly helpful! Will there be a PDF version as some comments have alluded to?
Thanks for a great work.
Matthew (May 17th, 2007, 2:29 am)
Great post. But I saw one issue in my initial read-through. When you mention setting the body font size to 62.5%, you say it is equal to 16px. 62.5% should actually be equal to 10px. (Most) Browsers default to 16px already, which is 12pt. Great post though.
Scott Mackenzie (May 17th, 2007, 8:59 am)
Woo. That’s one fine collection. I even learned a few things.
Jon Henshaw (May 17th, 2007, 9:32 pm)
Re: 1.1
If you’re naming your IDs and Classes based on their function, then you’re doing it all wrong. You might as well just type in an inline style or do align=”left”
Bad: “<p class=”floatLeft alignLeft width75″>”
Instead, base them objects. For example, a left column DIV should be named something like sidenav, not leftColumn. The content of the HTML should be separate from the presentation. That way, the “sidenav” can go wherever you want and still have the naming scheme make sense — because it was named based on the object and not its current function (to be a column floated to the left).
One other tip is to try to match elements before creating IDs or Classes. That will enable less markup in the HTML and keep things simple in your CSS.
David Thomson (May 18th, 2007, 2:14 pm)
Great collection of css resources with summaries.
One thing I would say, off the top of my head, would be to define your font in the html selector so that form inputs enjoy the same font control as all the other elements in the body section.
Vik (May 19th, 2007, 3:17 am)
Very Helpful Thanks
kiko (May 19th, 2007, 5:36 pm)
Awesome!
matt snider (May 22nd, 2007, 3:02 am)
Awesome article, especially towards the end. Thanks for aggregating this.
Eric Carroll (May 22nd, 2007, 5:09 am)
I haven’t had the issues that some have mentioned when using borders for debugging, but I would recommend using something like:
div { border-top: 1px solid red; }This avoids breaking the layout with left and right side borders when they push stuff beyond your set widths. This is helpful if you have a repeating background tile in a div that fills up all the space (so a color wouldn’t show). It just depends on what is going on, but I normally use a top border for debugging layout issues. I guess you could create a debug stylesheet and take it out upon launch. Hmm. I’ll have to remember that.
I recommend naming based on the content and/or area (#left-column, #middle-column, #right-column, #right-column p, etc). Naming with a bunch of classes can become a problem and I have seen IE choke on some when using a Javascript file that rounded corners (I can’t remember which one it was). I just prefer to target items based on parent-child relationships.
I’m not a big fan of negative margins, though, as they seem to be more hassle, to me. I prefer floats (don’t forget to add “display:inline;” for squashing the IE double margin float bug) and positive margins.
Overall, this post makes me look at the “why” of my workflow. Thanks for making me think.
Malcolm (May 23rd, 2007, 7:40 pm)
Amazing list.. will try to incorporate some suggestions.
Keep it up..
Coder (May 24th, 2007, 6:42 am)
Thank you.
You have provided us all with some very useful techniques.
Bjarni Wark (May 31st, 2007, 11:49 am)
Thanks for the tip:
width:expression(document.body.clientWidth 1200? “1200px” : “auto”);
JDM Blog (May 31st, 2007, 3:54 pm)
thanks for the info…i learned a lot. thumbs up man
hem (May 31st, 2007, 7:17 pm)
really this ia awesome site, i ve evr seen. thanx a lot . keep doing. best of luck dear
Paul van Buuren (June 1st, 2007, 6:51 pm)
What would you consider the best option:
Set 100.01% for the html-element (and set font sizes using %)
OR
Set the initial font size to 62.5% (and use ems)
Trivković Toni (June 4th, 2007, 5:11 am)
WOW, thanks on a list ! ;)
Diseño (June 18th, 2007, 2:32 pm)
I’ll use some of your tips in future designs. I.e: I had problems with brower defaults… now I’ll reset default css values. Thanks!
Kent Smith (June 18th, 2007, 5:02 pm)
There’s a great big mistake on your site, in the first entry under “1.5 Workflow”.
Using a font size of 62.5 %, 1.3em is NOT the same as 1.3px. Why would anyone put 1.3px text on their site? 1.3em is equivalent to 13px.
Correcting that makes a simply bizarre paragraph quite sensible.
Sherman Cheong (June 20th, 2007, 11:21 am)
Too much of a good stuff isn’t necessarily good cos I’m suffering from design tips overload. ;) Excellent compilation of CSS design tips, no doubt! Keep it up!
fatihturan (June 20th, 2007, 8:58 pm)
Roger Johansson’s link is wrong on above paragraph. You must edit this. And i must say this post is very good. Thanks.
iddaa (June 21st, 2007, 11:27 pm)
It’s a very nice tutorial, I just wish you had one for beginners :)
JN (June 25th, 2007, 2:24 am)
Great tips! Very helpfull for beginning coders like me..
Tino Triste (July 5th, 2007, 5:22 pm)
Cool! the best article I have seen in a long time. Thanks
Tino Triste (July 5th, 2007, 5:22 pm)
Cool! the best CSS article I have seen in a long time. Thanks
rzrsej (July 22nd, 2007, 9:08 pm)
Thanks for another great collection of designing tips. You guys are truly a remarkable resource for designers who are still relatively new to the process but trying to improve their work. I especially like the first few suggestions, those that focus on getting started and – more importantly – staying organized throughout. I find that I still have a lot of trouble losing track of some elements, and I know that I spend more time on a project than I probably should. These ideas should all help with that. In addition, I’ve had consistent problems with typography, and the suggestions in that particular area have already helped clarify what I’ve been doing wrong. I know that I’m never going to be an award-winning designer, but considering that a year ago when I started I was merely working through a user interface to make my pages, I think the tutorials and suggestions you guys put up have made a huge difference in the quality of my work
Phil (September 20th, 2007, 6:38 pm)
Thanks! Now I’m working on my web design job template!
Phil
Josh (October 5th, 2007, 2:02 am)
Nice list but some of the pointers contradicted some of the others. Big score for me was the whole reset master style sheet thing
Good work
Alex (October 9th, 2007, 3:41 am)
I like firefox and so I like most the a { outline: none; } trick.
Very useful.
Thanks a lot
tricker (November 28th, 2007, 6:30 pm)
really a great help… its like all the rockstars in a single place.. :)
Jose (December 31st, 2007, 10:50 am)
Really useful information, I have applied it to my project :)
Nimish (January 10th, 2008, 4:35 am)
I am using a textarea and it is inherting css properties from its parents or global properties, which I dont want to do and remove all the properties coming from any where and have only specific stylesheet for that textarea.
Any help would be greatly appreciated.
David Taté (January 10th, 2008, 4:03 pm)
cool, i like it
Bill Bailey (January 13th, 2008, 12:49 am)
Hey this is great thanks so Much for the CSS tips
I use a few of these currently but there are a few xtra xtra great tips
Once again thanks
Paul (January 24th, 2008, 9:42 am)
It’s so good…… thanks …..
Cryota (January 28th, 2008, 10:37 am)
Really amazing magazine, i discovered it about a 2 weeks ago and this is what I want to read. Really its everything good in it to inform myself. Keep on!
bbx (January 29th, 2008, 9:11 am)
Just found out about this list, it’s really great. It’s not about learning CSS but optimizing CSS which is exactly what I want. I knew only a couple of these tips. Really helpful.
suit (January 30th, 2008, 5:10 pm)
worst “tutorial” i ever read
you suggest to use a box-model-trick to simulate correct padding - what about conditional comments an separate stylesheets for crappy ie6 and valid xhtml-code for propper box-model in ie7 + less redundant code, dont show css hacks anymore, they have absolutely no use nowadays
best ideal ever is the “class library” lol about that - you dont you suggest to make classes like “littlereddot” and rename every single line in css and html after a redesign to “bigbluerectangle” - DON’T EVER name them that stupid - use cascades for declarations - thats why css (cascading style sheets) is a declarative language
Keep CSS hacks to a minimum - very useful to - produce invalid code or use bugs that will be fixed in next update, verry funny to fix problems then ;) - make template/css for firefox/opera/safari and use conditional comments for crappy ie -> solves all you problems
debugging with borders: bad idea in allmost-standard-browses - boxmodel boder is added to width = crashes your design by adding just 1px if you’ve built a float-based layout - use tools like firebug, webdeveloper-extention or just backgroundcolors for debugging
Divide your stylesheet into specific sections - yeah, and use stupid 3-line comments for that - everybody can see with ease that a single selector like p {} or a {} is a global style - ids should only be used for structural specifications (and forms of couse), classes can also be identified very nice and should use descriptive names - so you can spare your useless comments
also mixing up stuff is bad style (numberformats for colors - 3 or 6 digits, in common use colors should be allways discribed in 5 digi hex (easier to locate) or just keep your system - if you want to replace all whites to blue - you need to possibly search for #fff, #ffffff and white or rgb(255,255,255) whatever - if you use just one single system -> better for workflow
You can remove dotted links with … - thats a very cool trick, especialy for accessibily - someone navigating with keyboard will probably “like” this feature ;)
sum: nice try with that article
lewis litanzios (January 31st, 2008, 5:25 pm)
god a lot of people moan in the comments; sure [it] might not be suited to beginners - then go somewhere else! there’s enough stuff online and of course; lovely books if you want to get started!
as far as not ‘catering’ for older browsers - why bother?! be progressive! after all you’ve mentioned conditional comments. how far you wanna go back just depends on how many conditionals you want to throw around. we’d be here all day if the author wrote a comprehensive article on cross-browser css. i don’t think this much depth is called for on the web today. if you want to learn about archaic eccentricities then the library is probably your safest bet tbh.
coding to W3C standards and you’re 90% there is stating the obvious here really.
time well spent. thanks guys.
ryan (February 2nd, 2008, 1:41 pm)
Excellent tips on CSS shortcuts. I’ve been using CSS for quite awhile, but still picked up a lot that I didn’t know. For those of you who use Dreamweaver, I use an extension that is a major timesaver when generating page structure. The details are up to you, but it does save a ton of time. Check it out at Link [www.webassist.com].
Fille (February 12th, 2008, 4:56 pm)
really usefull information ! PNG and IE bug ………………………. ;)
Fareed (February 21st, 2008, 6:53 am)
Hi,
I am new to web designing. I have done a bit of CSS in college. I wonder how can I get CSS to open the links in the middle column.
Basically I want to design a simple CSS web page with a banner at the top, the links of al the pages in the side. but I want all the links to open in the middle column.
Please check this website:
Link [www.arabtimesonline.com]
here all the links on the left side and also in the middle open in the middle column.
thanks
Web Pixy (February 27th, 2008, 3:22 am)
Amazing article and the sources are great too:) I found lots of useful information in this post so thank you very much for sharing!
prasun (March 27th, 2008, 4:27 am)
This links are super…
great. job
Ralph (April 15th, 2008, 1:19 pm)
Great summary about css ideas to improve the css-code. Thank you for great work ;)
Ralph
Roger (April 17th, 2008, 3:05 am)
Awesome !!
Kingston (May 1st, 2008, 10:00 pm)
nice list.
Sharwan Kami (May 2nd, 2008, 8:38 am)
its just awsome!
john (May 3rd, 2008, 8:28 pm)
Yes the Use of shorthand notation is quite interesting, as for as borders are concern you can draw Link [www.compwrite.com] without using images, and the good thing is that if you later on change the width of your site you dont need to change the background image, as the shadded borders are generated via css.
but i hate compatibilty issues as IE shows different than Firefox, and it makes me crazy to troubleshoot.
Thanks for the article , helped me alot.
jonathan (May 4th, 2008, 12:43 pm)
for me too a great article! +fav
Bryan Glass (May 6th, 2008, 10:14 pm)
Loved the article. Just wanted to add that IMO the Firebug extension for Firefox is probably the SINGLE MOST HELPFUL tool for debugging CSS.
Buzzmoica (May 23rd, 2008, 7:12 am)
Great Job, I’m amaized! ! !!
Thank you !
Harry Roberts (May 25th, 2008, 2:20 am)
You could also use my new CSS Framework: Link [csswizardry.com] :p
Harry
Vince Verberckt (June 9th, 2008, 11:39 am)
Wow, Super guide really nice !!!!!!!!!!
Going to follow all of these tips on my website !
Grtz Vince Verberckt (http://vince.verberckt.com)
Jan (June 12th, 2008, 2:35 am)
I think the IE PNG trick can only be used in backgrounds and not with the img tag.
Fahd Murtaza (June 25th, 2008, 1:55 am)
OK I have got the 71th Expert Idea. Use firebug as a CSS debugging tool.
Link [getfirebug.com]
steven nguyen (July 1st, 2008, 12:20 am)
very interesting!!
Chris Branson (August 4th, 2008, 10:58 am)
I Another great article. CSS Reset made my design look so much better. I can only imagine what my designs would look like without you!
fornetti (August 31st, 2008, 9:12 am)
I do not believe this
张家界旅游 (September 2nd, 2008, 8:26 am)
A maiden with many wooers often chooses the worst.All the treasures of the earth would not bring back one lost moment.
kuncoro (September 9th, 2008, 10:43 pm)
thanks for your info
ali (September 18th, 2008, 1:05 am)
tnx you visit my site Link [www.Mihandownload.com]
mohammad (September 20th, 2008, 5:41 am)
Link [www.p30island.com] plz visit my web
Ferienwohnung Sizilien (October 4th, 2008, 1:35 pm)
This is greatly helpful! Thanks for this great work.
I use a few of these currently but there are a few xtra xtra great tips
Great Job, I’m amaized!
Thank you !
Link [www.ferienwohnungen-auf-sizilien.de]
alanya haber (October 11th, 2008, 1:17 am)
Thanks for the resources Link [www.alanyahaber.com]
alanya haber (October 11th, 2008, 1:20 am)
Thanks for the resources Link [www.alanyahaber.com]
iddaa (October 19th, 2008, 7:01 am)
Hello,
I am loving smashing magazine too.
Just wondering… near the beginning of the article all of these import style sheets are mentioned as part of a master stylesheet. I was wondering what the difference of these might be. What kinds of things each one might hold. I had sort of thought that reset.css and global.css would be pretty much the same?
Thanks
Link [www.futbol-tahmin.com]
devbahis (October 21st, 2008, 3:15 am)
Link []
iddaa (October 29th, 2008, 5:10 am)
Ok, so how about the differences between CSS1 and CSS2
Link [www.iddaa123.com]
ganpat sharma (November 10th, 2008, 6:17 pm)
hello
This is greatly helpful! Thanks for this great work.
I use a few of these currently but there are a few xtra xtra great tips
thanks
Kayserispor (November 16th, 2008, 11:13 am)
1.1. Workflow: Getting Started - Keep a library of helpful CSS classes.
That’s terrible! Read this
Link [www.ksfan.org]
Nihal (November 26th, 2008, 3:23 am)
nice article
iddaa (December 11th, 2008, 2:37 pm)
:)
Sayyed Noman (December 16th, 2008, 6:24 am)
Thanks for this very nice work.
thanks
sayednoman (December 18th, 2008, 3:37 am)
thanks for your information
we are very thanks full
thans
Tam CaO (January 8th, 2009, 6:28 pm)
thanks so much
It`s really helpful
kens (January 13th, 2009, 1:11 am)
coooooooool!
Aqil From Iraq (January 26th, 2009, 1:22 am)
This is the best tutorial i found thenk you very mutch.
moxxy (February 6th, 2009, 4:57 pm)
Dont forget to use IE Developer Toolbar and also Firefox Developer Toolbars to help you visualize the css on your page
amongchina (March 30th, 2009, 11:14 pm)
oh,I have not view a articale like this one,it really some good idea and professional ideas,I will study them carefully,hope can improve my css design level,thanks!
Ronald (April 5th, 2009, 7:20 pm)
I really like this and a great post will keep this in my additional knowlledge for me, thanks.
Darin Burris (May 4th, 2009, 12:20 pm)
I would have to agree with all of the previous comments that point out the poor choice of selector names…
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
)
…these are all really bad choices and should be avoided like the plague, especially by beginners.
suomynona (May 12th, 2009, 12:20 am)
Here is a very complete an professional CSS Coding Style Convention (Standards Guidelines & Rules), find it here:
Link [www.nodewave.com]
Link [www.nodewave.com]
Rebecca (May 26th, 2009, 12:53 pm)
very nice set of useful tips