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.

7d86093feb64d21538561ea2c071a89e?s=128

Fiona Chan

August 01, 2016
Tweet

Transcript

  1. @mobywhale CSS { } Code Smell Sanitation

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

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

  4. @mobywhale Love hate CSS Broken Heart by Peter van Driel

    from the Noun Project
  5. @mobywhale Crystal Ball by Emma Darvick from the Noun Project

    CSS is like dark magic
  6. @mobywhale CSS Linting Checks for problems in your CSS

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

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

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

    nesting ✓ Property units
  10. @mobywhale Integrate linting
 into your day to day process *

  11. @mobywhale IDE

  12. @mobywhale Continuous integration process

  13. @mobywhale Shield by Bettina Tan from the Noun Project Linting

    is not bullet proof
  14. @mobywhale Length of your CSS vertically & horizontally

  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; }
  16. @mobywhale Magic numbers Values that “just work”

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

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

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

    }
  20. @mobywhale Add a comment
 if you must use a magic

    number *
  21. @mobywhale Fixed height on elements

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

  23. HTML <ul class="cast-list"> <li> <div class="cast"> <img src=".."> <p class="cast-name">

    Daenerys Targaryen </p> </div> </li> </ul> 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; }
  24. @mobywhale position: absolute Is it the right option? Or just

    the easy option?
  25. @mobywhale CSS .aside { position: absolute; right: 0; }

  26. @mobywhale Stress test your user interface
 Don’t cater for the

    perfect scenario *
  27. @mobywhale • Change font size • Different types of content

    • Different devices / screen size • Elements added / removed from page Stress test with:
  28. @mobywhale Resetting values Setting and unsetting

  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; }
  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; }
  31. @mobywhale Old browser prefixes Lingering around in legacy code

  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; }
  33. @mobywhale Update Autoprefixer config * Check what browsers you support

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

    4.1, Safari >= 7']
  35. @mobywhale Review the build in the browser Check out the

    pull request
  36. @mobywhale Use Developer Toolbar
 Allows you to better understand the

    changes *
  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; }
  38. None
  39. None
  40. @mobywhale Does the code make sense? Will you be able

    to maintain it?
  41. @mobywhale • Naming • Organisation • Properties used

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

  43. • Magic numbers • Fixed height • position: absolute •

    Resetting values Lookout for:
  44. • Review the UI in the browser • See if

    the code is easy to understand? Also don’t forget to:
  45. Thank you for listening