A collection of tips to help take your CSS skills pro.
For other great lists check out @sindresorhus's curated list of awesome lists.
Table of Contents
Protips
- Use a CSS Reset
- Inherit
box-sizing
- Use
unset
Instead of Resetting All Properties - Use
:not()
to Apply/Unapply Borders on Navigation - Add
line-height
tobody
- Vertically-Center Anything
- Comma-Separated Lists
- Select Items Using Negative
nth-child
- Use SVG for Icons
- Use the "Lobotomized Owl" Selector
- Use
max-height
for Pure CSS Sliders - Equal-Width Table Cells
- Get Rid of Margin Hacks With Flexbox
- Use Attribute Selectors with Empty Links
- Style "Default" Links
- Consistent Vertical Rhythm
- Intrinsic Ratio Boxes
- Style Broken Images
- Use
rem
for Global Sizing; Useem
for Local Sizing - Hide Autoplay Videos That Aren't Muted
- Use
:root
for Flexible Type - Set
font-size
on Form Elements for a Better Mobile Experience
Use a CSS Reset
CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like Normalize, et al., or you can use a more simplified reset approach:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Now elements will be stripped of margins and padding, and box-sizing
lets you manage layouts with the CSS box model.
Demo
Note: If you follow the Inherit box-sizing
tip below you might opt to not include the box-sizing
property in your CSS reset.
box-sizing
Inherit Let box-sizing
be inherited from html
:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
This makes it easier to change box-sizing
in plugins or other components that leverage other behavior.
unset
Instead of Resetting All Properties
Use When resetting an element's properties, it's not necessary to reset each individual property:
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
You can specify all of an element's properties using the all
shorthand. Setting the value to unset
changes an element's properties to their initial values:
button {
all: unset;
}
Note: the all
shorthand isn't supported in IE11 and is currently under consideration for support in Edge. unset
isn't supported in IE11.
:not()
to Apply/Unapply Borders on Navigation
Use Instead of putting on the border...
/* add border */
.nav li {
border-right: 1px solid #666;
}
...and then taking it off the last element...
/* remove border */
.nav li:last-child {
border-right: none;
}
...use the :not()
pseudo-class to only apply to the elements you want:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
Sure, you can use .nav li + li
, but with :not()
the intent is very clear and the CSS selector defines the border the way a human would describe it.
Demo
line-height
to body
Add You don't need to add line-height
to each <p>
, <h*>
, et al. separately. Instead, add it to body
:
body {
line-height: 1.5;
}
This way textual elements can inherit from body
easily.
Demo
Vertically-Center Anything
No, it's not black magic, you really can center elements vertically:
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.
Note: Watch for some buggy behavior with flexbox in IE11.
Demo
Comma-Separated Lists
Make list items look like a real, comma-separated list:
ul > li:not(:last-child)::after {
content: ",";
}
Use the :not()
pseudo-class so no comma is added to the last item.
Note: This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.
nth-child
Select Items Using Negative Use negative nth-child
in CSS to select items 1 through n.
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
Or, since you've already learned a little about using :not()
, try:
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}
Well that was pretty easy.
Demo
Use SVG for Icons
There's no reason not to use SVG for icons:
.logo {
background: url("logo.svg");
}
SVG scales well for all resolution types and is supported in all browsers back to IE9. So ditch your .png, .jpg, or .gif-jif-whatev files.
Note: If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:
.no-svg .icon-only::after {
content: attr(aria-label);
}
Use the "Lobotomized Owl" Selector
It may have a strange name but using the universal selector (*
) with the adjacent sibling selector (+
) can provide a powerful CSS capability:
* + * {
margin-top: 1.5em;
}
In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em
.
For more on the "lobotomized owl" selector, read Heydon Pickering's post on A List Apart.
Demo
max-height
for Pure CSS Sliders
Use Implement CSS-only sliders using max-height
with overflow hidden:
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
The element expands to the max-height
value on hover and the slider displays as a result of the overflow.
Equal-Width Table Cells
Tables can be a pain to work with so try using table-layout: fixed
to keep cells at equal width:
.calendar {
table-layout: fixed;
}
Pain-free table layouts.
Demo
Get Rid of Margin Hacks With Flexbox
When working with column gutters you can get rid of nth-
, first-
, and last-child
hacks by using flexbox's space-between
property:
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
Now column gutters always appear evenly-spaced.
Use Attribute Selectors with Empty Links
Display links when the <a>
element has no text value but the href
attribute has a link:
a[href^="http"]:empty::before {
content: attr(href);
}
That's pretty convenient.
Demo
Style "Default" Links
Add a style for "default" links:
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
Now links that are inserted via a CMS, which don't usually have a class
attribute, will have a distinction without generically affecting the cascade.
Consistent Vertical Rhythm
Use a universal selector (*
) within an element to create a consistent vertical rhythm:
.intro > * {
margin-bottom: 1.25rem;
}
Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.
Intrinsic Ratio Boxes
To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
Demo
Style Broken Images
Make broken images more aesthetically-pleasing with a little bit of CSS:
img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
Now add pseudo-elements rules to display a user message and URL reference of the broken image:
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
Learn more about styling for this pattern in Ire Aderinokun's original post.
rem
for Global Sizing; Use em
for Local Sizing
Use After setting the base font size at the root (html { font-size: 100%; }
), set the font size for textual elements to em
:
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
Then set the font-size for modules to rem
:
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}
Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.
Hide Autoplay Videos That Aren't Muted
This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:
video[autoplay]:not([muted]) {
display: none;
}
Once again, we're taking advantage of using the :not()
pseudo-class.
:root
for Flexible Type
Use The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root
:
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
Now you can utilize the root em
unit based on the value calculated by :root
:
body {
font: 1rem/1.6 sans-serif;
}
Demo
font-size
on Form Elements for a Better Mobile Experience
Set To avoid mobile browsers (iOS Safari, et al.) from zooming in on HTML form elements when a <select>
drop-down is tapped, add font-size
to the selector rule:
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
Support
Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.