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

More Decks by Fiona Chan

Other Decks in Programming


  1. @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; }
  2. 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; }
  3. @mobywhale • Change font size • Different types of content

    • Different devices / screen size • Elements added / removed from page Stress test with:
  4. @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; }
  5. @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; }
  6. @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; }
  7. @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; }
  8. • Review the UI in the browser • See if

    the code is easy to understand? Also don’t forget to: