Topics for today
- Inheritance
- Values & Units
- Shorthands
- DRY
- Pseudo-elements
- Custom properties for cascading variables
background
font
border
text-decoration
display
color
padding
white-space
margin
text-shadow
box-shadow
box-sizing
outline
--*
Inherited Not inherited
!important
?Where does inheritance fit in?
inherit
is an explicit value that makes any property inherit
width: 400px;
width: 50%;
width: 400px;
width: 400px;
0
, the unit is optionalExamples:
px
,
cm
,
mm
,
in
,
pt
em
,
ch
,
rem
,
ex
vh
,
vw
,
vmin
,
vmax
button {
background: yellowgreen;
border: 1px solid olivedrab;
padding: 15px;
border-radius: 6px;
font-size: 32px;
line-height: 32px;
}
button {
background: yellowgreen;
border: 1px solid olivedrab;
padding: .5em;
border-radius: .2em;
font-size: 32px;
line-height: 1em;
}
h1 {
font-weight: 300;
font-size: 4em;
}
h1 {
font-weight: 300;
font-size: 12vw;
}
width: 50%;
Each property defines whether percentages are allowed and what they represent
margin-left: 10%;
margin-top: 10%;
border: .3em steelblue;
outline: auto;
margin: auto;
overflow: auto;
inherit
initial
unset
revert
opacity: 0.5;
transform: rotate(10deg);
background-color: hsl(10, 100%, 40%);
background: url(img/chocolate-mousse.png) center / cover,
linear-gradient(teal 60%, gold);
background:
conic-gradient(teal 50%, gold);
border: .3em dotted steelblue;
border: dotted .3em steelblue;
border: steelblue .3em dotted;
padding: .2em .5em .1em .5em
;background: url(foo.png) 50% 50% / 100% auto no-repeat gold;
background: gold no-repeat 50% 50% / 100% auto url(foo.png);
font: 120%/1.5 Helvetica Neue, sans-serif;
background: url(cat.jpg)
0 10% / 100% 100%
no-repeat
content-box border-box
fixed;
background-image: url(cat.jpg);
background-position: 0 10%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-origin: content-box;
background-clip: border-box;
background-attachment: fixed;
Every piece of knowledge must have a single, unambiguous, authoritative representation within a systemThe Pragmatic Programmer, Andy Hunt and Dave Thomas
def right_triangle_perimeter(a, b, c):
return a + b + c
# ... later on
p = right_triangle_perimeter(3, 4, 5)
from math import sqrt
def right_triangle_perimeter(a, b):
return a + b + sqrt(a**2 + b**2)
# ... later on
p = right_triangle_perimeter(3, 4)
<button class="red-button">
Continue
</button>
.red-button {
background: hsl(0, 80%, 90%);
}
<button class="primary-button">
Continue
</button>
.primary-button {
background: hsl(0, 80%, 90%);
}
button {
border-radius: 5px;
padding: 5px 12px 6px;
font-size: 24px;
line-height: 24px;
}
button.large { font-size: 46px; }
button {
border-radius: .2em;
padding: .2em .5em .25em;
font-size: 100%;
line-height: 1;
}
button.large { font-size: 200%; }
.tab {
border-radius: .3em .3em 0 0;
padding: .1em .5em .1em .5em;
margin: 0 .1em 0 .1em;
}
.tab {
border-radius: .3em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: .1em .5em;
margin: 0 .1em;
}
Three strikes and you refactor
Duplication is far cheaper than the wrong abstractionSandy Metz
li::marker {
color: red;
}
input::placeholder {
color: slategray;
}
::selection {
background: rebeccapurple;
color: white;
}