Slide 1
Slide 1 text
@mobywhale
CSS
{ }
Code Smell Sanitation
Slide 2
Slide 2 text
@mobywhale
Put your hand up if you
love CSS?
Slide 3
Slide 3 text
@mobywhale
Keep your hand up if you
also hate CSS?
Slide 4
Slide 4 text
@mobywhale
Love hate CSS
Broken Heart by Peter van Driel from the Noun Project
Slide 5
Slide 5 text
@mobywhale
Crystal Ball by Emma Darvick from the Noun Project
CSS is like dark magic
Slide 6
Slide 6 text
@mobywhale
CSS Linting
Checks for problems in your CSS
Slide 7
Slide 7 text
@mobywhale
https:/
/github.com/CSSLint/csslint
Slide 8
Slide 8 text
@mobywhale
https:/
/github.com/brigade/scss-lint
Slide 9
Slide 9 text
scss-lint/config/default.yml
✓ Naming convention
✓ Duplicate property
✓ Level of nesting
✓ Property units
Slide 10
Slide 10 text
@mobywhale
Integrate linting
into your day to day process
*
Slide 11
Slide 11 text
@mobywhale
IDE
Slide 12
Slide 12 text
@mobywhale
Continuous integration process
Slide 13
Slide 13 text
@mobywhale
Shield by Bettina Tan from the Noun Project
Linting is not bullet proof
Slide 14
Slide 14 text
@mobywhale
Length of your CSS
vertically & horizontally
Slide 15
Slide 15 text
@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;
}
Slide 16
Slide 16 text
@mobywhale
Magic numbers
Values that “just work”
Slide 17
Slide 17 text
@mobywhale
CSS
.nav__dropdown {
position: absolute;
left: 0;
top: 48px;
}
48px
Slide 18
Slide 18 text
@mobywhale
CSS
.nav a {
padding-top: 25px;
padding-bottom: 25px;
}
Slide 19
Slide 19 text
@mobywhale
CSS
.nav__dropdown {
position: absolute;
left: 0;
top: 100%;
}
Slide 20
Slide 20 text
@mobywhale
Add a comment
if you must use a magic number
*
Slide 21
Slide 21 text
@mobywhale
Fixed height
on elements
Slide 22
Slide 22 text
CSS
.cast-name {
height: 48px;
}
Slide 23
Slide 23 text
HTML
-
Daenerys Targaryen
Slide 24
Slide 24 text
@mobywhale
position: absolute
Is it the right option? Or just the easy option?
Slide 25
Slide 25 text
@mobywhale
CSS
.aside {
position: absolute;
right: 0;
}
Slide 26
Slide 26 text
@mobywhale
Stress test your user interface
Don’t cater for the perfect scenario
*
Slide 27
Slide 27 text
@mobywhale
• Change font size
• Different types of content
• Different devices / screen size
• Elements added / removed from page
Stress test with:
Slide 28
Slide 28 text
@mobywhale
Resetting values
Setting and unsetting
Slide 29
Slide 29 text
@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;
}
Slide 30
Slide 30 text
@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;
}
Slide 31
Slide 31 text
@mobywhale
Old browser prefixes
Lingering around in legacy code
Slide 32
Slide 32 text
@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;
}
Slide 33
Slide 33 text
@mobywhale
Update Autoprefixer config
*
Check what browsers you support
Slide 34
Slide 34 text
@mobywhale
browsers: ['last 2 versions, Explorer >= 10, Android >= 4.1, Safari >= 7']
Slide 35
Slide 35 text
@mobywhale
Review the build in the browser
Check out the pull request
Slide 36
Slide 36 text
@mobywhale
Use Developer Toolbar
Allows you to better understand the changes
*
Slide 37
Slide 37 text
@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;
}
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
@mobywhale
Does the code make sense?
Will you be able to maintain it?
Slide 41
Slide 41 text
@mobywhale
• Naming
• Organisation
• Properties used
Slide 42
Slide 42 text
Don’t just rely on linting
Review the code properly
Slide 43
Slide 43 text
• Magic numbers
• Fixed height
• position: absolute
• Resetting values
Lookout for:
Slide 44
Slide 44 text
• Review the UI in the browser
• See if the code is easy to understand?
Also don’t forget to:
Slide 45
Slide 45 text
Thank you for listening