Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FESIG - You've been doing CSS Wrong

FESIG - You've been doing CSS Wrong

Siddharth Kshetrapal

December 05, 2014
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Design

Transcript

  1. You’ve been doing CSS wrong
    @siddharthkp

    View full-size slide

  2. You’ve been doing CSS wrong
    We’ve

    View full-size slide

  3. Difficult to maintain.
    CSS is simple.
    Simple to understand.
    Simple to use.

    View full-size slide

  4. How we do CSS
    > common
    common.css
    style.css
    > pages
    calendar.css
    reports.css
    profile.css
    records.css
    > records
    prescriptions.css
    treatments.css

    View full-size slide

  5. Repetition
    Loads of floats, font sizes, widths, etc.
    Non generic
    Styles are extremely specific to a certain page/element.
    Bloat
    File sizes get bigger and bigger as more features are added.

    View full-size slide

  6. Reusability is almost non-existent
    Developers don’t trust other’s code.
    Fragile
    A single change can screw up the layout.
    Overwriting, specificity war. (I’m looking at you, bootstrap)
    Further reading: http://blog.trifork.com/2013/06/04/twitter-bootstrap-why-you-
    should-not-use-it/

    View full-size slide

  7. 2009
    Nicole
    Sullivan
    @stubbornella

    View full-size slide

  8. Abstraction Modularity Inheritance

    View full-size slide

  9. Instead of
    > common
    common.css
    style.css
    > pages
    calendar.css
    reports.css
    profile.css
    records.css
    > records
    prescriptions.css
    treatments.css

    View full-size slide

  10. Mix and match components to make diverse pages.

    View full-size slide

  11. > global-legos
    reset.css
    grid.css
    menu.css
    buttons.css
    colors.css
    Application wide components/legos

    View full-size slide

  12. > modular-legos
    lists.css
    tables.css
    cards.css
    sidebar.css
    Specific components/legos
    > global-legos
    reset.css
    grid.css
    menu.css
    buttons.css
    colors.css

    View full-size slide

  13. Lego driven development
    Start designing individual pages only after all the legos have been
    defined.
    > pages
    calendar.css
    records.css
    profile.css

    View full-size slide

  14. Caveats
    Consistency
    A Heading should not become a Heading in another part of page.
    Write generic components
    /* Bad typography.scss */
    .font12 {
    font-size: 12px;
    }
    .font16 {
    font-size: 16px;
    }
    /* Good typography.scss */
    .smalltext {
    font-size: 10px;
    }
    .bigtext {
    font-size: 16px;
    }

    View full-size slide

  15. DRY
    /* color.scss */
    $practoblue: #08b;
    /* typography.scss */
    .link {
    cursor: pointer;
    }
    /* buttons.scss */
    .button {
    @extend .link;
    background: $practoblue;
    &:hover {
    background: lighten($practoblue, 10%);
    }
    }

    View full-size slide

  16. We have to do it. All of us have done it at some point of time.
    .perfectly-positioned-div {
    margin-top: -2px;
    }
    a {
    color: #BADA55 !important;
    }
    Life is hard...
    shame.css
    The code you have to write to get the release out on time/ fix a
    bug quickly but the code that makes you ashamed.

    View full-size slide

  17. /**
    * Nav specificity fix.
    *
    * Someone used an ID in the header code (`#header a {}`)
    * which trumps the nav selectors (`.site-nav a {}`).
    * Use!important to override it until I get the chance to
    * refactor the header.
    */
    .site-nav a {
    color: #BADA55 !important;
    }
    1. If it’s a hack, it goes in shame.css.
    2. Document all hacks fully.
    3. Do not blame the developer; if they explained why they had to do it then
    their reasons are (hopefully) valid.
    4. Try and clean shame.css up as soon as you get time (preferably in the very
    next sprint).
    Further reading: http://csswizardry.com/2013/04/shame-css/

    View full-size slide

  18. https://github.com/causes/scss-lint#linters
    https://github.com/CSSLint/csslint
    Basic syntax checking as well as applying a set of rules to the code that
    look for problematic patterns or signs of inefficiency.
    Linting
    .selector {
    property: value;
    }
    div {
    width: 100px;
    padding:0 10px;
    }
    1: warning at line 3, col 2
    Using width with padding can sometimes
    make elements larger than you expect.

    View full-size slide

  19. Asserts: Cactus
    .sidebar {
    margin-left: 10px;
    color: #333;
    }
    Cactus.expect(".header").toHaveMargin("10px");
    Cactus.expect(".header", "color").toEqual("#333");
    Link: https://github.com/winston/cactus

    View full-size slide

  20. Imagediff: CSS critic (phantomjs)
    Link: https://cburgmer.github.io/csscritic/

    View full-size slide