# CSS Protips: A Reference Collection of 29 Practical CSS Techniques

> CSS Protips is a GitHub repository maintained by Matt Smith that collects 29 specific CSS techniques, each with a working code example. It targets frontend developers who want concrete solutions to recurring styling problems rather than tutorials or framework documentation.

**AllThingsSmitty/css-protips** — A collection of tips to help take your CSS skills pro. 🕹 

- Repository: https://github.com/AllThingsSmitty/css-protips
- Stars: 30,284 · Forks: 2,204
- Language: Unknown
- License: CC0-1.0
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/allthingssmitty-css-protips

## What CSS Protips Contains and How It Is Organized

CSS Protips is a single README with 29 numbered tips. Each tip has a title, a brief explanation of the problem it addresses, one or more CSS code examples, and a link to a live CodePen demo. The tips are independent: each one addresses a specific technique that works without the others.

The repository structure is minimal: a `README.md` at the root, a `translations/` directory with localized versions in multiple languages, a `CONTRIBUTING.md`, and a `CODE-OF-CONDUCT.md`. There is no package to install, no build step, and no runtime dependency. The entire resource is static documentation.

The tips are grouped by function in the table of contents, covering resets, layout, typography, selectors, performance, and accessibility. Browsing the table of contents gives an accurate map of what is and is not covered.

## CSS Resets and Box Model Normalization

The first two tips address the box model. The opening tip shows a simplified reset pattern:

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

This strips default margins and padding from all elements and applies `border-box` sizing globally. The README notes that `box-sizing` may be redundant here if you follow the second tip instead.

The second tip shows an inheritance-based approach:

```css
html {
  box-sizing: border-box;
}

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

Setting `box-sizing` on `html` and inheriting it through the cascade means that components or plugins that need a different box model can override it locally without fighting a universal selector. The README credits this approach as making it easier to change `box-sizing` in plugins or other components that leverage other behavior.

A third related tip shows using `all: unset` to reset an element's properties to their initial values, which is more concise than listing each property individually.

## Selector Techniques: :not(), :is(), and nth-child

Several tips cover selector patterns that reduce specificity problems and simplify CSS. The `:not()` tip demonstrates removing a border from the last navigation item without overriding it with a second rule:

```css
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}
```

This reads as a single intention rather than two conflicting rules. The README notes that the CSS selector reads as a human would describe it.

The `:is()` tip shows using the pseudo-class to control specificity when applying styles to multiple selectors. Negative `nth-child` selectors allow selecting a range: the README shows selecting the first three items with `:nth-child(-n+3)`.

The attribute selector tip addresses links that have an `href` attribute but no visible text. Rather than relying on a class, the selector targets the attribute directly to display the URL as content.

## Layout: Centering, Flexbox, and Responsive Techniques

Two approaches to vertical centering appear in the tips. The flexbox version:

```css
html,
body {
  height: 100%;
}

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

And the CSS Grid version:

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

The `aspect-ratio` tip recommends using the CSS property instead of padding-based intrinsic ratio hacks for maintaining consistent width-to-height ratios in responsive layouts. Equal-width table cells are covered with `table-layout: fixed`. The flexbox tip for margins shows replacing margin-based last-child hacks with flex gap.

The lobotomized owl selector (`* + *`) applies spacing between adjacent siblings without special-casing first or last elements, which the README describes as one of the named selector patterns in the collection.

## Typography and Font Loading

The `line-height` tip recommends setting it once on `body` so all text elements inherit from one place:

```css
body {
  line-height: 1.5;
}
```

This avoids setting `line-height` separately on each `<p>`, heading, and other text element.

A performance-focused tip covers checking whether a font is installed locally before fetching it from a remote server:

```css
@font-face {
  font-family: "Dank Mono";
  src:
    local("Dank Mono"),
    local("Dank Mono"),
    url("//...a.server/fonts/DankMono.woff");
}
```

The `local()` function checks for a locally installed font first. Only if it is not found does the browser fetch the remote file. The README credits Adam Argyle for this tip.

The `:root` flexible type tip shows setting a base `font-size` on the `:root` element so that `rem` units throughout the stylesheet scale together.

## Accessibility and Form Elements

Two tips address accessibility directly. The `:focus` tip makes keyboard navigation visible and consistent:

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

The README notes that sighted keyboard users rely on focus to determine where keyboard events go in the page, and that the browser's default focus indicator is often inconsistent across browsers.

The mobile form sizing tip recommends setting `font-size` to at least 16px on form inputs to prevent iOS Safari from auto-zooming into the form field when the user taps it. The `pointer-events` tip covers disabling mouse interaction on elements without JavaScript, using `pointer-events: none`.

## What the Repository Does Not Cover and Its Limitations

CSS Protips covers techniques documented as of the last update. It does not cover CSS architecture methodologies such as BEM or utility-first approaches. Animation, keyframes, custom properties as design tokens, container queries, and the `@layer` cascade layer rule are absent. The repository is a collection of individual tricks, not a comprehensive CSS reference.

Each tip links to a CodePen demo, but the README does not include browser compatibility tables. A developer applying the `:is()` or `aspect-ratio` tips to a project that still supports older browsers needs to verify compatibility independently.

An alternative for developers who want opinionated, production-ready CSS defaults is the normalize.css project, which focuses on correcting browser inconsistencies rather than demonstrating techniques. normalize.css is a stylesheet you include; CSS Protips is a collection of techniques you copy selectively.

The repository is licensed CC0-1.0, which places the content in the public domain globally. There are no attribution requirements. Translations are in the `translations/` directory, covering multiple languages.

## Conclusion

CSS Protips is a useful desk reference for frontend developers who encounter the covered patterns in daily work. It is not a learning path, a framework, or a set of opinionated defaults you adopt wholesale. Individual tips are independent and can be applied selectively. The repository does not document browser support for each technique, so checking compatibility for the target audience remains the developer's responsibility. The last push was on 2026-09-18, and the repository is not archived. The CC0-1.0 license places the content in the public domain, so there are no attribution requirements for using the techniques.

## FAQ

### Is it still worth learning HTML and CSS in 2026?

CSS Protips does not address this question directly, but the repository's 29 techniques cover browser-standard CSS features that are not specific to any framework, so the skills apply across React, Vue, plain HTML, and other environments. The tips on box-sizing inheritance, flexbox centering, and focus styles are relevant regardless of which stack a frontend developer uses.

### What does CSS Protips contain?

CSS Protips is a GitHub repository with 29 numbered CSS techniques. Each tip includes a brief explanation, a CSS code example, and a link to a live CodePen demo. Topics include resets, box model inheritance, flexbox and grid layout, typography, selector patterns, and form accessibility.

### Does CSS Protips have a package to install?

No. CSS Protips is a documentation repository with no installable package, no build step, and no runtime dependency. Developers apply techniques by copying the relevant CSS into their own projects.

## Sources

- [AllThingsSmitty/css-protips on GitHub](https://github.com/AllThingsSmitty/css-protips)
- [Issues](https://github.com/AllThingsSmitty/css-protips/issues)
- [License: CC0-1.0](https://github.com/AllThingsSmitty/css-protips/blob/master/LICENSE)
- [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/allthingssmitty-css-protips