$30 off During Our Annual Pro Sale. View Details »

Big CSS

Harry Roberts
September 07, 2012

Big CSS

Slides from Big CSS at Canvas Conf, Birmingham, 2012

Video: https://www.youtube.com/watch?v=R-BX4N8egEc&hd=1

Harry Roberts

September 07, 2012
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. BIG CSS
    Canvas Conf, Birmingham 2012
    BigCSS

    View Slide

  2. HARRY ROBERTS
    csswizardry.com
    @csswizardry

    View Slide

  3. bit.ly/NiOAOR

    View Slide

  4. View Slide

  5. BSKYB
    Massive sites
    Loads of devs
    UI heavy
    Long running projects

    View Slide

  6. faavorite.com

    View Slide

  7. FAAVORITE
    Fairly small
    Two devs
    UI heavy
    Long running project

    View Slide

  8. WRITING CSS IS EASY...

    View Slide

  9. .foo{
    color:red; /* Very easy... */
    }

    View Slide

  10. ARCHITECTING IT ISNT...
    ,

    View Slide

  11. SKYBET.COM
    Biggest project I ever worked on...
    <10,000 lines of CSS
    2 files

    View Slide

  12. MO DEVS, MO PROBLEMS
    , ,

    View Slide

  13. CSS DOESNT KILL PEOPLE...
    Other developers do
    ,

    View Slide

  14. CSS = WTF

    View Slide

  15. CSS = WTF
    HTML is viewed in situ...
    Has no interdependencies...
    Is, by nature, self-explanatory.
    CSS relies on inheritance...
    The cascade...
    Specificity.

    View Slide

  16. DEFER MORE WORK TO THE HTML

    View Slide

  17. CSS PREPROCESSORS
    Sass > LESS
    Excellent when used correctly
    Provide a disconnection
    Less useful than a knowledge of architecture
    Makes nothing better, only faster to write
    Still only generating CSS

    View Slide

  18. OOCSS
    Promotes better understanding of everything
    Solves problems with/in vanilla CSS
    Can be combined with preprocessors

    View Slide

  19. OBJECTS > COMPONENTS
    Components are still cumbersome so...
    Break components down further as...
    Objects and abstractions are more useful.
    Can reuse a nav abstraction way more than .main-nav

    View Slide

  20. OBJECTS
    Design patterns, not components
    Very vaguely named
    Insemantic classes (e.g. .media)
    ,
    ,

    View Slide

  21. EXTENSIONS
    Much, much more specific
    Very explicitly named
    Much longer classes (e.g. .user-avatar-link)

    View Slide

  22. GOOD CSS HAS A ONE-TO-MANY
    RELATIONSHIP WITH HTML

    View Slide

  23. NAV ABSTRACTION
    .nav{
    list-style:none;
    margin-left:0;
    }
    .nav > li,
    .nav > li > a{
    display:inline-block;
    }

    View Slide

  24. .nav{}
    class="nav user-links"
    class="nav site-nav"
    class="nav breadcrumb"
    class="nav sponsor-logos"
    class="nav footer-nav"

    View Slide

  25. faavr.it/csswizardry
    45 instances on one page
    9 unique
    8 lines of CSS

    View Slide

  26. THE EASIEST WAY TO
    KEEP CSS MAINTAINABLE
    IS TO AVOID WRITING IT

    View Slide

  27. CASE STUDY — BSKYB

    View Slide

  28. USER-ACTIONS MENU
    Single component
    One ID on the
    Lots of descendants

    View Slide

  29. OR...?

    View Slide

  30. A BLOCKY LIST
    .ui-list{}
    Generic list
    Any type of content

    View Slide

  31. ICONS

    As portable as
    Spriteable

    View Slide

  32. ICONS WITH TEXT
    .ico-text{}
    Sorts spacing/alignment
    Any icon, any text

    View Slide

  33. SPLIT ITEMS
    .split{}
    Any type of content
    Restaurant menus etc

    View Slide

  34. USER-ACTIONS MENU
    A UI-list filled with...
    Icon objects...
    Icon-text objects...
    Splitter components.

    View Slide

  35. USER-ACTIONS MENU
    No IDs, lots more markup and classes, a LOT less CSS.
    Bespoke HTML and CSS (once compressed) weighed
    147 bytes LESS than the Google favicon!
    Abstractions come free-of-charge, they are
    already there and free to use over and over and over
    and over and over...

    View Slide

  36. TIPS AND TRICKS

    View Slide

  37. KEEP SPECIFICITY LOW
    NO IDs IN CSS!!!
    Write rulesets in specificity order
    Avoid qualifying selectors
    Avoid unnecessary nesting
    Avoid chaining selectors

    View Slide

  38. NO IDs IN CSS!!!
    Literally no point
    It takes 256 classes to override one ID
    Make several classes out of the reusable parts of the ID

    View Slide

  39. WRITE RULESETS IN
    SPECIFICITY ORDER
    Reset, elements, objects, components, style trumps
    Not in occurrence order (e.g. header, page, footer)
    Subsequent rulesets should only inherit, never undo

    View Slide

  40. AVOID QUALIFYING SELECTORS
    p.intro{} -> .intro{}
    Increases specificity — extra selectors
    Limits reusability — e.g. cannot be used on an
    Less efficient — more work for the browser

    View Slide

  41. AVOID UNNECESSARY NESTING
    .carousel .pane{} -> .pane{}
    Increases specificity
    Limits portability
    Less efficient

    View Slide

  42. AVOID CHAINING SELECTORS
    .msg.error{} -> .error-msg{}
    Increases specificity
    Less efficient

    View Slide

  43. INDENT RULESETS
    .carousel{}
    .panes{}
    .pane{}
    .pane-title{}
    .pane-img{}

    View Slide

  44. INDENT RULESETS





    View Slide

  45. CONTENT IS KING

    View Slide

  46. CONTENT IS KING
    /* comments */

    View Slide

  47. QUASI-QUALIFIED SELECTORS
    /*html*/.product-page{}
    /*ol*/.breadcrumb{}
    /*table*/.winners{}

    View Slide

  48. TABLE OF CONTENTS
    AND SECTION TITLES
    /*
    RESET.......Undo defaults
    MEDIA.......The media object
    MAIN........HTML/BODY, wrappers
    SITE-NAV....Page’s nav bar
    FOOTER......Disclaimer, links
    */

    View Slide

  49. TABLE OF CONTENTS
    AND SECTION TITLES
    /* $MEDIA */
    .media{}
    ...
    /* $MAIN */
    html{}
    ...
    /* $SITE-NAV */
    .site-nav{}

    View Slide

  50. TAGS IN CSS
    /*
    ^navigation ^lists ^text
    */
    .nav{}
    .nav > li,
    .nav > li > a{}

    View Slide

  51. TAGS IN CSS
    /*
    ^layout ^lists ^tables
    */
    .matrix{}
    .matrix > li{}

    View Slide

  52. COMMENTED OUT HTML
    /*

    Home

    */
    .nav{}
    .nav > li,
    .nav > li > a{}

    View Slide

  53. OBJECT/EXTENSION POINTERS
    /*
    Extend `.nav{}` in theme.css
    */
    .nav{}
    .nav > li,
    .nav > li > a{}

    View Slide

  54. OBJECT/EXTENSION POINTERS
    /*
    Extends `.nav{}` in base.css
    */
    .breadcrumb{}
    .breadcrumb > li,
    .breadcrumb > li > a{}

    View Slide

  55. SAY WHAT NOW?!

    View Slide

  56. SAY WHAT NOW?!
    Write less CSS
    Reuse more CSS — design patterns!
    Let the HTML do some work for a change!
    Get some rules, stick to them
    Comments, comments, comments!!!
    People are human

    View Slide

  57. CSS ISNT ALWAYS THE PROBLEM
    Other developers
    Lack/loss of knowledge
    Differing techniques
    Forgetfulness
    ,

    View Slide

  58. OTHER DUDE(TTE)S
    Nicole Sullivan — @stubbornella
    Jonathan Snook — @snookca
    Nicolas Gallagher — @necolas

    View Slide

  59. HARRY ROBERTS
    csswizardry.com
    @csswizardry

    View Slide