An Event Apart Notes: Nicole Sullivan, Our Best Practices are Killing Us

Grep to for analyze css.

CSS duplication is a web-wide problem.

Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations.

  • 1
    !important

    declarations get dangerous. Sites found to have over 500 !important declarations!

  • 1
    float

    is a serious problem when there are a lot of them. It’s better to use some sort of abstraction rather than floating everything for layout.

  • 1
    font-size

    : there should not be a need for more than half a dozen size declarations, use abstraction!

insanity: doing the same thing over and over and expecting different results.

We all have this problem of duplication. CSS (like JS) will let you do anything you want (even if it’s stupid). But we don’t have to do stupid things!

New Best practices

  • Pixels for fonts: became frowned on with ie6, but all modern browsers use pixels, ems and percentages just fine. Why not avoid percentage and ems because they have significant drawbacks and compounding effects.
  • Adding extra syntax/markup: separations of concerns – make functionality overlap as little as possible. Solve one problem at a time and use extra mark-up judiciously (don’t go nuts with dives, but also don’t strip out too much and introduce bugs).
  • Semantics: class names and ids are not usually read by end users, so let’s make sure class names and ids work well for developers. More is not always better. Create abstractions that solve problems one time. Don’t couple CSS too tightly to the content or the display. DRY (Don’t Repeat Yourself – Every piece of knowledge must have a single, unambiguous, authoritative representation within a system).
    Media block (like a SLAT in dan’s talk). Separate structure from chrome (design). May have some extra css class names or divs, but it will cut html and css overall.
  • Classitis: use specificity to accurately target elements. Class order in attribute doesn’t matter, but order in the actually cascade. Specificity grows over time and you end up coding via firebug. !important is like nuclear trump in CSS. Avoid the nulcear option: keep specificity low: avoid IDs, inline styles, !important, and very complex selectors. Apply classes to the element we are trying to affect (not to a parent node). Use class “h6″ along with h3 elements for visual and code semantics to play nicely.

Great developers can build amazing things if we move worst-best practices out of our way.

Resources:
oocss – join the oocss google group
csslint.net

This entry was posted in blog and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Recent Posts

    Screenshot-2013-11-27-14.20.16

    Add Links to Twitter Mentions, Hashtags, and URLs with PHP

    This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks! If you’re using the Twitter v1.1 API to fetch […]

    regex101.com

    Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

    Stumbled on a great regex tool today. An explanation of your regex will be automatically generated as you type. Detailed match information will be displayed here automatically. via Online regex tester and debugger: JavaScript, Python, PHP, and PCRE. Tweet

    CSS Dig

    A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity). Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Take a look at all your CSS […]

    How to use solid web principles to justify what you were going to do anyway | A List, A Fart

    Imitation may be the sincerest form of flattery, but mockery must be the biggest sign of mainstream… And this is a good thing, alistapart.com, the de facto web publication for web professionals, now has a parody site: alistafart.com. Tongue in cheek, and sarcastic, but sadly, sometimes not very far from the truth… In this era of […]

    Add Shortcode with Add Media Button

    This code snippet really helped me today and since the post doesn’t have commenting enabled, I wanted to say thanks here! Working on building a WordPress plugin that generates shortcodes and wanted an interface for the user to create their own with a wizard of sorts, so using a media button, shortcode and thickbox all […]

    A Developer’s Guide to Contributing to WordPress Core

    Here’s a great post from the team at delicious brains, the same team who brings us WP Migrate DB Pro for all our wordpress database migration needs (and do a bang up job I might add). They discuss all the in and out of working with trac and the ticketing system as well as setting […]

css.php