Источник: css-protips — синхронизируется из внешнего репозитория как sparse-субмодуль (только список).

CSS Protips

#

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

Contents

#

• Protips
• Support
• Translations
• Contribution Guidelines

Protips

#

1. Use a CSS Reset
2. Inherit box-sizing
3. Use unset Instead of Resetting All Properties
4. Use :not() to Apply/Unapply Borders on Navigation
5. Check if Font Is Installed Locally
6. Add line-height to body
7. Set :focus for Form Elements
8. Vertically-Center Anything
9. Use aspect-ratio Instead of Height/Width
10. Comma-Separated Lists
11. Select Items Using Negative nth-child
12. Use SVG for Icons
13. Use the “Lobotomized Owl” Selector
14. Use max-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. Use rem for Global Sizing; Use em for Local Sizing
23. Hide Autoplay Videos That Aren’t Muted
24. Use :root for Flexible Type
25. Set font-size on Form Elements for a Better Mobile Experience
26. Use Pointer Events to Control Mouse Events
27. Set display: none on Line Breaks Used as Spacing
28. Use :empty to Hide Empty HTML Elements
29. Use margin-inline instead of margin

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:

*,
*::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

#

^{Back to top}

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

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

^{Back to top}

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

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

Add line-height to body

#

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

#

^{Back to top}

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 than a browser’s default implementation:

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

Demo

#

^{Back to top}

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

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

…and also with CSS Grid:

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

Demo

#

^{Back to top}

Use aspect-ratio Instead of Height/Width

#

The aspect-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. Use object-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 the aspect-ratio property in this web.dev post.

Demo

#

…превью ограничено; полный список — в репозитории.