CSS is often overlooked as something that would require a code review. The test for good CSS has been "Does everything look good?"
With the complexity and scale of our projects these days, "looks good" is simple not enough. This presentation dives into what it takes to create or progress a positive and beneficial code review process for yourself or your team.
30. …
…
.container {
…
…
.nav {
…
…
ul {
…
…
&.dropdown {
…
…
li.nav-item {
a {
color: white;
}
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W
31. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
32. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
33. I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
body .page .header .container .na
color: violet !important;
}
34. .nav {
li {
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
a {
color: orange;
&:hover {
color: salmon;
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W
35. %base {
color: violet;
}
.foo {
@extend %base;
color: orange;
}
.bar {
color: yellow;
@extend %base;
}
.foo,
.bar {
color: violet;
}
.foo {
color: orange;
}
.bar {
color: yellow;
}
C O M P I L E S T O :
@ E X T E N D
# N o P a i n | W H AT T O R E V I E W
36. U N N E C E S S A RY A B S T R A C T I O N
# N o P a i n | W H AT T O R E V I E W
37. F I X E D VA L U E S
.element {
font-size: 27px;
height: 37px;
line-height: 44px;
margin-top: 19px;
width: 264px;
}
# N o P a i n | W H AT T O R E V I E W
38. A C C E S S I B I L I T Y
*:focus {
outline: none;
}
# N o P a i n | W H AT T O R E V I E W
40. B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
.element {
float: left;
display: left;
margin-right: 2.35765%;
width: 100%;
}
.element:last-child {
margin-right: 0;
}
C O M P I L E S T O :
43. .element {
width: 100%;
}
B L O AT E D O U T P U T
.element {
float: left;
display: left;
margin-right: 2.35765%;
width: 100%;
}
.element:last-child {
margin-right: 0;
}
VS.
# N o P a i n | W H AT T O R E V I E W
44. V E N D O R P R E F I X E S
.example {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
# N o P a i n | W H AT T O R E V I E W
45. U N U S E D C O D E
.example {
/* Unnecessary vendor prefixes
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box; */
box-sizing: border-box;
}
# N o P a i n | W H AT T O R E V I E W
46. U N U S E D C O D E
A D D U n C S S T O Y O U R B U I L D P R O C E S S
# N o P a i n | W H AT T O R E V I E W
47. S C A L A B I L I T Y
OOCSS
BEM
SMACSS
# N o P a i n | W H AT T O R E V I E W
48. R E V I E W Y O U R O W N C O D E
# N o P a i n | T O O L S
Any Text Editor
… and so many more