CSS: Code Smell Sanitation

@mobywhale CSS { } Code Smell Sanitation

@mobywhale Put your hand up if you love CSS?

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

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

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

@mobywhale CSS Linting Checks for problems in your CSS

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

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

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

@mobywhale Integrate linting  into your day to day process *

@mobywhale IDE

@mobywhale Continuous integration process

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

@mobywhale Length of your CSS vertically & horizontally

@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; }

@mobywhale Magic numbers Values that “just work”

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

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

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

@mobywhale Add a comment  if you must use a magic
number *

@mobywhale Fixed height on elements

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

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; }

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

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

@mobywhale Stress test your user interface  Don’t cater for the
perfect scenario *

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

@mobywhale Resetting values Setting and unsetting

@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; }

@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; }

@mobywhale Old browser prefixes Lingering around in legacy code

@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; }

@mobywhale Update Autoprefixer config * Check what browsers you support

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

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

@mobywhale Use Developer Toolbar  Allows you to better understand the
changes *

@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; }

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

@mobywhale • Naming • Organisation • Properties used

Don’t just rely on linting Review the code properly

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

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

Thank you for listening

CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

More Decks by Fiona Chan

Other Decks in Programming

Featured

Transcript