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

CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Imagine this: you are reviewing someone's CSS. Everything looks valid and has passed linting. Does that mean it's ready for production? What are some other things you should be spotting before passing the code review?

In this talk, Fiona will show you how to spot some of the early symptoms of code smell and how you can make your CSS more robust.

Fiona Chan

August 01, 2016
Tweet

More Decks by Fiona Chan

Other Decks in Programming

Transcript

  1. @mobywhale
    CSS
    { }
    Code Smell Sanitation

    View full-size slide

  2. @mobywhale
    Put your hand up if you
    love CSS?

    View full-size slide

  3. @mobywhale
    Keep your hand up if you
    also hate CSS?

    View full-size slide

  4. @mobywhale
    Love hate CSS
    Broken Heart by Peter van Driel from the Noun Project

    View full-size slide

  5. @mobywhale
    Crystal Ball by Emma Darvick from the Noun Project
    CSS is like dark magic

    View full-size slide

  6. @mobywhale
    CSS Linting
    Checks for problems in your CSS

    View full-size slide

  7. @mobywhale
    https:/
    /github.com/CSSLint/csslint

    View full-size slide

  8. @mobywhale
    https:/
    /github.com/brigade/scss-lint

    View full-size slide

  9. scss-lint/config/default.yml
    ✓ Naming convention
    ✓ Duplicate property
    ✓ Level of nesting
    ✓ Property units

    View full-size slide

  10. @mobywhale
    Integrate linting

    into your day to day process
    *

    View full-size slide

  11. @mobywhale
    IDE

    View full-size slide

  12. @mobywhale
    Continuous integration process

    View full-size slide

  13. @mobywhale
    Shield by Bettina Tan from the Noun Project
    Linting is not bullet proof

    View full-size slide

  14. @mobywhale
    Length of your CSS
    vertically & horizontally

    View full-size slide

  15. @mobywhale
    a.card.card-active .card-name {
    width: 940px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 0 5px #ccc;
    float: left;
    position: relative;
    top: -5px;
    z-index: 51;
    height: 36px;
    font-size: 11px;
    line-height: 1;
    border-bottom: 2px solid #000;
    background: #f51ab2;
    border-radius: 2px;
    font-size: 1rem;
    }

    View full-size slide

  16. @mobywhale
    Magic numbers
    Values that “just work”

    View full-size slide

  17. @mobywhale
    CSS
    .nav__dropdown {
    position: absolute;
    left: 0;
    top: 48px;
    }
    48px

    View full-size slide

  18. @mobywhale
    CSS
    .nav a {
    padding-top: 25px;
    padding-bottom: 25px;
    }

    View full-size slide

  19. @mobywhale
    CSS
    .nav__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    }

    View full-size slide

  20. @mobywhale
    Add a comment

    if you must use a magic number
    *

    View full-size slide

  21. @mobywhale
    Fixed height
    on elements

    View full-size slide

  22. CSS
    .cast-name {
    height: 48px;
    }

    View full-size slide

  23. HTML





    Daenerys Targaryen




    CSS .cast-list,
    .cast-list li {
    display: flex;
    }
    .cast {
    display: flex;
    flex-direction: column;
    }
    .cast-name {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    }

    View full-size slide

  24. @mobywhale
    position: absolute
    Is it the right option? Or just the easy option?

    View full-size slide

  25. @mobywhale
    CSS
    .aside {
    position: absolute;
    right: 0;
    }

    View full-size slide

  26. @mobywhale
    Stress test your user interface

    Don’t cater for the perfect scenario
    *

    View full-size slide

  27. @mobywhale
    • Change font size
    • Different types of content
    • Different devices / screen size
    • Elements added / removed from page
    Stress test with:

    View full-size slide

  28. @mobywhale
    Resetting values
    Setting and unsetting

    View full-size slide

  29. @mobywhale
    –Johnny Appleseed
    CSS
    .box {
    padding: 20px;
    background: #f0eda0;
    border: 2px solid #666;
    box-shadow: 0 0 10px #b52d2d;
    }
    .box--2 {
    background: #e87979;
    border: 0;
    box-shadow: none;
    }
    .box--1 {
    background: none;
    box-shadow: none;
    }

    View full-size slide

  30. @mobywhale
    –Johnny Appleseed
    CSS
    .box {
    padding: 20px;
    }
    .box--2 {
    background: #e87979;
    }
    .box--1 {
    background: #f0eda0;
    border: 2px solid #666;
    box-shadow: 0 0 3px #ccc;
    }

    View full-size slide

  31. @mobywhale
    Old browser prefixes
    Lingering around in legacy code

    View full-size slide

  32. @mobywhale
    –Johnny Appleseed
    “Type a quote here.”
    CSS
    .element {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    }

    View full-size slide

  33. @mobywhale
    Update Autoprefixer config
    *
    Check what browsers you support

    View full-size slide

  34. @mobywhale
    browsers: ['last 2 versions, Explorer >= 10, Android >= 4.1, Safari >= 7']

    View full-size slide

  35. @mobywhale
    Review the build in the browser
    Check out the pull request

    View full-size slide

  36. @mobywhale
    Use Developer Toolbar

    Allows you to better understand the changes
    *

    View full-size slide

  37. @mobywhale
    –Johnny Appleseed
    “Type a quote here.”
    CSS
    .pinImageDim .dimOverlay {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-color: #000;
    border-radius: 6px 6px 0 0;
    opacity: 0;
    position: absolute;
    transition: opacity .04s linear;
    }

    View full-size slide

  38. @mobywhale
    Does the code make sense?
    Will you be able to maintain it?

    View full-size slide

  39. @mobywhale
    • Naming
    • Organisation
    • Properties used

    View full-size slide

  40. Don’t just rely on linting
    Review the code properly

    View full-size slide

  41. • Magic numbers
    • Fixed height
    • position: absolute
    • Resetting values
    Lookout for:

    View full-size slide

  42. • Review the UI in the browser
    • See if the code is easy to understand?
    Also don’t forget to:

    View full-size slide

  43. Thank you for listening

    View full-size slide