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. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    custom post types wordcamp presentation evan mullins

    WordCamp Presentation on WordPress.TV

    My presentation about Custom Post Types and Custom Fields from WordCamp Atlanta 2014 has been added to wordpress.tv. Here it is! Enjoy! Tweet

    WCATL-Speaker

    Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

    I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta! Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear […]

    Screenshot 2014-03-17 08.12.14

    What screens want

    Great read if you haven’t yet read it yet: Frank Chimero : What screens want : http://frankchimero.com/what-screens-want/ web and interaction design are just as much children of filmmaking as they are of graphic design. Maybe even more so. After all, we both work on screens, and manage time, movement, and most importantly, change. So what […]

    bed-bug-lifecycle-stages

    Before You Report that Bug, Use this Pre-Contact, Self-Diagnosis Routine

    Wisdom for bug reporting from Newfangled There are a few things a developer usually needs to know in order to diagnose a bug, and these are the things we’re likely to come back and ask you about if you haven’t already provided them. So, to ensure we can help you as quickly as possible, here’s […]

    deathtozach-06

    In dependence – Not dead

    Great summary and call to arms to write our own content in our own ways on our own sites. Call it what you like but ‘blogging’ is somewhat waning, in the social webs. Since as easy it is to create your own site and express your own voice, we’re flocking to the ‘services’ that will […]

    Screenshot 2014-03-17 08.50.27

    I ain’t ‘fraida no maths

    I’d heard of the ‘coding maths’ series, but hadn’t watched it yet. I should have, it’s great! Keith Peters (one of the people who first got me into scripting) has a great series about the math behind coding and as always he has a way of making complex things simple to me! Learn all you […]

css.php