Github url

css-protips

by AllThingsSmitty

AllThingsSmitty /css-protips

A collection of tips to help take your CSS skills pro

14.6K Stars 1.1K Forks Last release: Not found Creative Commons Zero v1.0 Universal 322 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

light bulb icon

CSS Protips Awesome

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

  1. Use a CSS Reset
  2. [Inherit
    box-sizing
    ](https://github.com/AllThingsSmitty/css-protips/blob/master/#inherit-box-sizing)
  3. [Use
    unset
    Instead of Resetting All Properties](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-unset-instead-of-resetting-all-properties)
  4. [Use
    :not()
    to Apply/Unapply Borders on Navigation](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-not-to-applyunapply-borders-on-navigation)
  5. Check If Font Is Installed Locally
  6. [Add
    line-height
    to
    body
    ](https://github.com/AllThingsSmitty/css-protips/blob/master/#add-line-height-to-body)
  7. [Set
    :focus
    for Form Elements](https://github.com/AllThingsSmitty/css-protips/blob/master/#set-focus-for-form-elements)
  8. Vertically-Center Anything
  9. Comma-Separated Lists
  10. [Select Items Using Negative
    nth-child
    ](https://github.com/AllThingsSmitty/css-protips/blob/master/#select-items-using-negative-nth-child)
  11. Use SVG for Icons
  12. Use the "Lobotomized Owl" Selector
  13. [Use
    max-height
    for Pure CSS Sliders](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-max-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. Consistent Vertical Rhythm
  19. Intrinsic Ratio Boxes
  20. Style Broken Images
  21. [Use
    rem
    for Global Sizing; Use
    em
    for Local Sizing](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-rem-for-global-sizing-use-em-for-local-sizing)
  22. Hide Autoplay Videos That Aren't Muted
  23. [Use
    :root
    for Flexible Type](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-root-for-flexible-type)
  24. [Set
    font-size
    on Form Elements for a Better Mobile Experience](https://github.com/AllThingsSmitty/css-protips/blob/master/#set-font-size-on-form-elements-for-a-better-mobile-experience)
  25. Use Pointer Events to Control Mouse Events
  26. [Set
    display: none
    on Line Breaks Used as Spacing](https://github.com/AllThingsSmitty/css-protips/blob/master/#set-display-none-on-line-breaks-used-as-spacing)

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:

\*, \*::before, \*::after { 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

](https://github.com/AllThingsSmitty/css-protips/blob/master/#inherit-box-sizing) tip below you might opt to not include the

box-sizing

property in your CSS reset.

back to table of contents

Inherit

box-sizing

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.

Demo

back to table of contents

Use

unset

Instead of Resetting All Properties

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.

back to table of contents

Use

:not()

to Apply/Unapply Borders on Navigation

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

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

Demo

back to table of contents

Check If Font Is Installed Locally

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 and demo.

back to table of contents

Add

line-height

to

body

You don't need to add

line-height

to each

,

<h></h>

, et al. separately. Instead, add it to

body

:

body { line-height: 1.5; }

This way textual elements can inherit from

body

easily.

Demo

back to table of contents

Set

:focus

for Form Elements

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 dotted 2px; outline-offset: .05em; }

Demo

back to table of contents

Vertically-Center Anything

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 has a nice write-up on doing all of that.

Note: Watch for some buggy behavior with flexbox in IE11.

Demo

back to table of contents

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

Select Items Using Negative

nth-child

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()

](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-not-to-applyunapply-borders-on-navigation), try:

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

Demo

back to table of contents

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

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

back to table of contents

Use

max-height

for Pure CSS Sliders

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.

back to table of contents

Equal-Width Table Cells

Tables can be a pain to work with. Try using

table-layout: fixed

to keep cells at equal width:

.calendar { table-layout: fixed; }

Pain-free table layouts.

Demo

back to table of contents

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.

back to table of contents

Use Attribute Selectors with Empty Links

Display links when the

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

back to table of contents

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.

back to table of contents

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.

back to table of contents

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

back to table of contents

Style Broken Images

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 in Ire Aderinokun's original post.

back to table of contents

Use

rem

for Global Sizing; Use

em

for Local Sizing

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.

back to table of contents

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()

](https://github.com/AllThingsSmitty/css-protips/blob/master/#use-not-to-applyunapply-borders-on-navigation) pseudo-class.

back to table of contents

Use

:root

for Flexible Type

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

back to table of contents

Set

font-size

on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, et al.) from zooming in on HTML form elements when a

<select></select>

drop-down is tapped, add

font-size

to the selector rule:

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

:dancer:

back to table of contents

Use Pointer Events to Control Mouse Events

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

Set

display: none

on Line Breaks Used as Spacing

As Harry 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

Support

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

back to table of contents

Translations

back to table of contents

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.