LukeW | An Event Apart: CSS Best Practices

via LukeW | An Event Apart: CSS Best Practices.

In her Our Best Practices Are Killing Us presentation at An Event Apart in Minneapolis MN, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term.

Here’s notes by Luke Wroblewski

Problems with CSS

  • Performance is an important part of the Web experience, with poor performance people engage less, use the site less, etc. CSS on many sites is responsible for poor performance.
  • Facebook had 706 CSS files, they declared the Facebook blue color 261 times, used 548 unique hex values for colors, had 6498 declarations of color. Salesforce.com had 3,669 padding declarations.
  • You can use GREP, regular expressions to analyze CSS files to find matches like this.
  • Looking at the Alexa top 1,000 sites revealed some interesting data. One site had 518 declarations of !important. One had 733 declared float elements. One had 889 font-size declarations. All this makes it hard for a new or existing developer to work with the CSS code. This is a Web-wide problem.
  • Even though we think each project will be “different”, our existing best practices mean these problems keep coming up.
  • It’s time to rethink our best practices and do things differently. CSS will allow us to do anything no matter how stupid. But just because we can doesn’t mean we should.

Pixel Based Sites

  • Myth: pixel based sites are bad. Why did we stop using pixels for layout? Internet Explorer 6 wouldn’t allow fonts to be resized when specced in pixels. As a result, we had to use percentages and ems.
  • Today browsers use page zoom and resize everything (pixels, ems, and percentages) on the page (IE 7+). So fonts declared in pixels can be resized.
  • Nested percentages and ems are not predictable.
  • Pixel based fonts can be resized on all modern browsers with page zoom. Check how many users are still on IE6.
  • If you must use percentages/ems, only change font-size on the body and leaf nodes, nowhere in between.

Extra Markup

  • Myth: don’t add any extra mark-up.
  • A predictable box structure allows you to debug more easily. A module body plays an important role: Trapping margin collapse, Trapping floats, Creating a new formatting context.
  • When you cross lines between elements solving different problems you have problems.
  • Separation of concerns: process of separating a computer program into distinct features that overlap in functionality as little as possible.
  • Solve one problem at a time (isolate into mark-up) but add mark-up judiciously. Don’t go nuts with extra HTML but know that bugs can come up when you try to have modules do too much.

Semantic Markup

  • Myth: more semantic the better.
  • Class names and IDs are not read by search engines, accessibility devices, or users (except other developers). So let’s make sure that our class names & IDs work for other developers.
  • Very semantic class names can prevent re-use. More semantic is not always better.
  • CSS can be too tightly coupled to content. Repeatable patterns are likely better for CSS maintenance and performance. DRY: don’t repeat yourself.
  • Find common elements and presentation, and abstract them out into separate code. Look at what things are known and common amongst a set of modules and what differs.
  • A new formatting context says “I’m a box, nothing comes out of me.” This is very useful for managing floats and varying content.
  • Facebook reduced file size by finding a common abstraction for all the items in their news feed: cut average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).
  • This is great for performance but the savings in work and maintenance can be more important. Repetition, Duplication, and Legacy Code make it really hard to work on Web sites. It can snowball out of control.
  • Find a middle ground with abstracted styles and semantic enhancements where they are applicable.
  • Choose good semantic elements: headings, lists, paragraphs
  • The CSS shouldn’t be tightly coupled with the display or with the content.

Classitis

  • Myth: Some people believe IDs are better than classes but they can be overly specific but specificity is much more dangerous for duplication than extra classes.
  • Specificity can be limiting for re-use. When we use descendent selectors, specificity can get complex quickly. Specificity grows over time and it becomes difficult to know which rules will take precedence.
  • The order of classes does not guarantee which one will be applied first. The last property value pair in a CSS declaration is the one that applies. The order of style sheets also matters. The last style sheet wins.
  • CSS inheritance: properties are inherited by child elements. For example, paragraphs inherit the font-size of the body.
  • IDs win over classes. Inline styles win over external style sheets. !important wins even over inline styles.
  • A hostile work environment can develop when it’s too difficult to tell which styles will take precedence. The only way you can code is with Firebug and eventually it becomes impossible to get the look and feel you want.
  • We want semantically styled elements but styled the way we need.
  • Separate visual semantics from element semantics.
  • Classes are far more flexible & reusable
  • Keep specificity low: avoid ID, inline and !important when styling elements.
  • Avoid the descendent selector
  • Add classes to the element you wish to change rather than a parent node.
  • Great developers can create great things is we move our worst best practices out of the way. CSS is fine but we’ve been trying too hard to follow practices that lead us into painful maintenance situations and overly complex code.
Advertisements

35 comments on “LukeW | An Event Apart: CSS Best Practices

  1. I image this could be numerous upon the written content material? in spite of this I nonetheless believe that it could be suitable for virtually any form of subject subject material, as a result of it will regularly be pleasing to determine a warm and delightful face or maybe pay attention a voice while initial landing.

  2. Hiya, I just hopped over on your site by way of StumbleUpon. Not one thing I might usually read, however I appreciated your thoughts none the less. Thanks for making one thing value reading.

  3. I like the valuable information you be offering in your articles. I will be able to bookmark your blog and feature my youngsters check up here generally. I’m relatively sure they’re going to be told lots of new stuff right here than anyone else!

  4. My buddy requested that i arrive and read at the posting, jane is actually do a school project on the subject. Were did you get your own oringal information and facts on this particular or did an individual make it up?

  5. There are some interesting points in time in this article but I don’t know if I see all of them heart to eye . There is some validity but I will take hold judgement until I look into it further. Good clause, thanks and we want more! Added to FeedBurner besides.

  6. Thanks for making the sincere strive to explain this. I believe very robust approximately it and wish to learn more. If it’s OK, as you attain more extensive wisdom, may you thoughts including more posts very similar to this one with additional info? It might be extraordinarily helpful and useful for me and my colleagues.

  7. Good web site! I really love how it is nice on my eyes it is. I am wondering how I might be notified when a new post has been made. I have subscribed to your feed which may do the trick? Have a nice day!

  8. Whats up, I simply hopped over on your website online by way of StumbleUpon. No longer one thing I might most often read, but I favored your emotions none the less. Thank you for making one thing price reading.

  9. Good post. I be trained something tougher on contrasting blogs everyday. It may well remain stimulating to master information from different writers and practice a bit the one thing from their site. I’d elect to make use of some while using articles in my small weblog if you do not mind. Natually I’ll will give you link on your own web blog. Many thanks sharing.

  10. Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  11. Thanks for making the sincere try to provide an explanation for this. I think very strong approximately it and wish to learn more. If it’s OK, as you reach more in depth wisdom, might you thoughts adding more posts very similar to this one with additional info? It will be extraordinarily useful and useful for me and my colleagues.

  12. Simply, the article is due to actuality the freshest about this laudable topic. I fit in with your conclusions and definitely will thirstily look forward your future updates. Saying thanks is not going to simply be satisfactory, for your outstanding lucidity inside your writing. I most certainly will instantly grab your feed to current with any updates. Nice work and success in on-line business endeavors!

  13. Just right issues?I might observe that as someone who in reality doesn’t write on blogs a lot (in fact, this can be my first submit), I don’t assume the time period ‘lurker’ could be very becoming to a non-posting reader. It’s no longer your fault in the slightest degree , but possibly the blogosphere may just come up with a better, non-creepy title for the 90% of us that enjoy reading the content material .

  14. A fast hello and to appreciate discussing your notions in this posting. I appeared as part of your weblog right after researching health and fitness connected issues on Yahoo guess I lost track of some tips i ended up being performing! Anyway I will be back after again inside long haul to confirm out of the blogposts in the future. Thanks!

Comments are closed.