Repository files navigation

A collection of tips to help take your CSS skills pro.

For other great lists check out@sindresorhus's curated list ofawesome lists.

• Protips
• Support
• Translations
• Contribution Guidelines

1. Use a CSS Reset
2. Inheritbox-sizing
3. Useunset Instead of Resetting All Properties
4. Use:not() to Apply/Unapply Borders on Navigation
5. Check If Font Is Installed Locally
6. Addline-height tobody
7. Set:focus for Form Elements
8. Vertically-Center Anything
9. Comma-Separated Lists
10. Select Items Using Negativenth-child
11. Use SVG for Icons
12. Use the "Lobotomized Owl" Selector
13. Usemax-height for Pure CSS Sliders
14. Equal-Width Table Cells
15. Get Rid of Margin Hacks With Flexbox
16. Use Attribute Selectors with Empty Links
17. Style "Default" Links
18. Intrinsic Ratio Boxes
19. Style Broken Images
20. Userem for Global Sizing; Useem for Local Sizing
21. Hide Autoplay Videos That Aren't Muted
22. Use:root for Flexible Type
23. Setfont-size on Form Elements for a Better Mobile Experience
24. Use Pointer Events to Control Mouse Events
25. Setdisplay: none on Line Breaks Used as Spacing

CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library likeNormalize,et al., or you can use a more simplified reset approach:

*,*::before,*::after {box-sizing: border-box;margin:0;padding:0;}

Now elements will be stripped of margins and padding, andbox-sizing lets you manage layouts with the CSS box model.

Note: If you follow theInheritbox-sizing tip below you might opt to not include thebox-sizing property in your CSS reset.

^{back to table of contents}

Letbox-sizing be inherited fromhtml:

html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}

This makes it easier to changebox-sizing in plugins or other components that leverage other behavior.

^{back to table of contents}

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 theall shorthand. Setting the value tounset changes an element's properties to their initial values:

button {all: unset;}

Note: theall andunset shorthand isn't supported in IE11.

^{back to table of contents}

Instead of putting on the border...

/* add border */.navli {border-right:1px solid#666;}

...and then taking it off the last element...

/* remove border */.navli:last-child {border-right: none;}

...use the:not() pseudo-class to only apply to the elements you want:

.navli:not(:last-child) {border-right:1px solid#666;}

Here, the CSS selector is read as a human would describe it.

^{back to table of contents}

You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.

@font-face {font-family:"Dank Mono";src:/* Full name */local("Dank Mono"),/* Postscript name */local("Dank Mono"),/* Otherwise, download it! */url("//...a.server/fonts/DankMono.woff");}code {font-family:"Dank Mono", system-ui-monospace;}

H/T to Adam Argyle for sharing this protip anddemo.

^{back to table of contents}

You don't need to addline-height to each<p>,<h*>,et al. separately. Instead, add it tobody:

body {line-height:1.5;}

This way textual elements can inherit frombody easily.

^{back to table of contents}

Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent then a browser's default implementation:

a:focus,button:focus,input:focus,select:focus,textarea:focus {box-shadow: none;outline:#000 dotted2px;outline-offset:.05em;}

^{back to table of contents}

No, it's not black magic, you really can center elements vertically. You can do this with flexbox...

html,body {height:100%;margin:0;}body {-webkit-align-items: center;-ms-flex-align: center;align-items: center;display: -webkit-flex;display: flex;}

...and also with CSS Grid:

body {display: grid;height:100vh;margin:0;place-items: center center;}

Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks hasa nice write-up on doing all of that.

Note: Watch for somebuggy behavior with flexbox in IE11.

^{back to table of contents}

Make list items look like a real, comma-separated list:

ul>li:not(:last-child)::after {content:",";}

Use the:not() pseudo-class and no comma will be 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.

^{back to table of contents}

Use negativenth-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 aboutusing:not(), try:

/* select all items except the first 3 and display them */li:not(:nth-child(-n+3)) {display: block;}

^{back to table of contents}

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 browsersback to IE9. 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);}

^{back to table of contents}

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 receivemargin-top: 1.5em.

For more on the "lobotomized owl" selector, readHeydon Pickering's post onA List Apart.

^{back to table of contents}

Implement CSS-only sliders usingmax-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 themax-height value on hover and the slider displays as a result of the overflow.

^{back to table of contents}

Tables can be a pain to work with. Try usingtable-layout: fixed to keep cells at equal width:

.calendar {table-layout: fixed;}

Pain-free table layouts.

^{back to table of contents}

When working with column gutters you can get rid ofnth-,first-, andlast-child hacks by using flexbox'sspace-between property:

.list {display: flex;justify-content: space-between;}.list .person {flex-basis:23%;}

Now column gutters always appear evenly-spaced.

^{back to table of contents}

Display links when the<a> element has no text value but thehref attribute has a link:

a[href^="http"]:empty::before {content:attr(href);}

That's pretty convenient.

^{back to table of contents}

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 aclass attribute, will have a distinction without generically affecting the cascade.

^{back to table of contents}

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;}.containerdiv {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).

^{back to table of contents}

Make broken images more aesthetically-pleasing with a little bit of CSS:

img {display: block;font-family: 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 inIre Aderinokun'soriginal post.

^{back to table of contents}

After setting the base font size at the root (html { font-size: 100%; }), set the font size for textual elements toem:

h2 {font-size:2em;}p {font-size:1em;}

Then set the font-size for modules torem:

article {font-size:1.25rem;}aside .module {font-size:.9rem;}

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

^{back to table of contents}

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.

^{back to table of contents}

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 theroot em unit based on the value calculated by:root:

body {font:1rem/1.6 sans-serif;}

^{back to table of contents}

To avoid mobile browsers (iOS Safari,et al.) from zooming in on HTML form elements when a<select> drop-down is tapped, addfont-size to the selector rule:

input[type="text"],input[type="number"],select,textarea {font-size:16px;}

💃

^{back to table of contents}

Pointer events allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:

.button-disabled {opacity:.5;pointer-events: none;}

It's that simple.

^{back to table of contents}

AsHarry Roberts pointed out, this can help prevent CMS users from using extra line breaks for spacing:

br+br {display: none;}

^{back to table of contents}

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

^{back to table of contents}

• 简体中文
• 正體中文
• Deutsch
• Español
• Français
• λληνικά
• ગુજરાતી
• Italiano
• 日本語
• 한국어
• Polskie
• Português do Brasil
• Português do Europe
• Русский
• Tiếng Việt

^{back to table of contents}