A collection of tips to help take your CSS skills pro.
- Use
:not()
to Apply/Unapply Borders on Navigation - Add Line-Height to
body
- Vertically Center Anything
- Select Items Using Negative
nth-child
- Use SVG for Icons
- Inherit
box-sizing
- Get Rid of Margin Hacks With Flexbox
/* instead of putting on the border... */
.nav li {
border-right: 1px solid #666;
}
/* ...and then taking it off... */
.nav li:last-child {
border-right: 0;
}
/* ...use :not() to only apply to the elements you want */
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
It's clean, readable, and easy to understand without the need for hack-y code.
body {
line-height: 1;
}
You don't need to add line-height
to each <p>
, <h*>
, et al. separately. This way textual elements can inherit from body
easily.
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
No, it's not dark magic, you really can center elements vertically. Look how simple this is.
Note: Watch for some buggy behavior with flexbox in IE11.
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
Use negative nth-child
in CSS to select items 1 through n. Well that was pretty easy.
.logo {
background: url("logo.svg");
}
There's no reason not to use SVG for icons. SVG is supported in all browsers back to IE9. So ditch your .png, .jpg, or .gif-jif-whatev files.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Letting box-sizing
be inheritted from html
makes it easier to change box-sizing
in plugins or other components that leverage other behavior.
.list-of-people {
display: flex;
justify-content: space-between;
}
.list-of-people .person {
flex-basis: 23%;
}
When working with column gutters you can get rid of nth-
, first-
, and last-child
hacks by using flexbox's space-between
property.
These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.