Repository files navigation

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

• 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. Useaspect-ratio Instead of Height/Width
10. Comma-Separated Lists
11. Select Items Using Negativenth-child
12. Use SVG for Icons
13. Use the "Lobotomized Owl" Selector
14. Usemax-height for Pure CSS Sliders
15. Equal-Width Table Cells
16. Get Rid of Margin Hacks With Flexbox
17. Use Attribute Selectors with Empty Links
18. Control Specificity Better With:is()
19. Style "Default" Links
20. Intrinsic Ratio Boxes
21. Style Broken Images
22. Userem for Global Sizing; Useem for Local Sizing
23. Hide Autoplay Videos That Aren't Muted
24. Use:root for Flexible Type
25. Setfont-size on Form Elements for a Better Mobile Experience
26. Use Pointer Events to Control Mouse Events
27. Setdisplay: none on Line Breaks Used as Spacing
28. Use:empty to Hide Empty HTML Elements
29. Usemargin-inline instead ofmargin

CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, 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.

^{Back to top}

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 top}

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;}

^{Back to top}

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 top}

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 top}

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 top}

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

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

^{Back to top}

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

html,body {height:100%;}body {align-items: center;display: flex;justify-content: center;}

...and also with CSS Grid:

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

^{Back to top}

Theaspect-ratio property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Useobject-fit with it to prevent disrupting the layout if the height/width values of images changes.

img {aspect-ratio:16/9;/* width / height */object-fit: cover;}

Learn more about theaspect-ratio property in thisweb.dev post.

^{Back to top}

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.

^{Back to top}

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 top}

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.

.no-svg .icon-only::after {content:attr(aria-label);}

^{Back to top}

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.

^{Back to top}

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 top}

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 top}

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 top}

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 really convenient.

^{Back to top}

The:is() pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.

:is(section,article,aside,nav):is(h1,h2,h3,h4,h5,h6) {color: green;}

The above ruleset is equivalent to the following number selector rules...

sectionh1,sectionh2,sectionh3,sectionh4,sectionh5,sectionh6,articleh1,articleh2,articleh3,articleh4,articleh5,articleh6,asideh1,asideh2,asideh3,asideh4,asideh5,asideh6,navh1,navh2,navh3,navh4,navh5,navh6 {color: green;}

^{Back to top}

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 top}

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 top}

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;}

^{Back to top}

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:0.9rem;}

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

^{Back to top}

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 top}

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+0.5vmin);}

Now you can utilize theroot em unit based on the value calculated by:root:

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

^{Back to top}

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 top}

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:0.5;pointer-events: none;}

It's that simple.

^{Back to top}

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

br+br {display: none;}

^{Back to top}

If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g.,<p></p>) and it's creating unwanted space on your layout, use the:empty pseudo-class to hide the element on the layout.

:empty {display: none;}

^{Back to top}

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

^{Back to top}

margin-inline defines the inline start and end margins of an element. So instead of usingmargin-left andmargin-right we can use the inline property to define both.

.div {margin-inline: auto;}

The same can be done formargin-block with defines the block start and end margins, i.e.,margin-top andmargin-bottom.

.div {margin-block: auto;}

^{Back to top}

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

^{Back to top}