AllThingsSmitty/css-protips

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

Contents

• Translations
• Contribution Guidelines

Protips

• Use a CSS Reset
• Inherit box-sizing
• Use unset Instead of Resetting All Properties
• Use :not() to Apply/Unapply Borders on Navigation
• Check if Font Is Installed Locally
• Add line-height to body
• Set :focus for Form Elements
• Vertically-Center Anything
• Use aspect-ratio Instead of Height/Width
• 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

Use a CSS Reset

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:

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