CSS things I care about

Bookmarks

Document obscure styles

Write detailed comments for code that isn't self-documenting. For example:

Positioning: a common pattern is to apply position: absolute to an element and position: relative to one of its ancestors (to create a positioning context), so that the descendant element can be positioned relative to the position of the ancestor. This relationship between an element and one of its ancestors is difficult to spot when viewing a CSS file, so it's helpful to document this. See below for an example.
z-index (relative to which stacking context?)
Compatibility or browser-specific hacks
Overrides
overflow: hidden (this has many different purposes)

These comments can be useful later on when the code is refactored as they help us understand whether a style is still relevant or whether it can Ebe safely removed.

Example:

/* MyComponent.css */
.parent {
  /* Descendant is relative to this. [tag:relative_ancestor_MyComponent.parent] */
  position: relative;

  text-align: center;
}

.descendant {
  /* Relative to [ref:relative_ancestor_MyComponent.parent]. */
  position: absolute;

  /* Push to right */
  margin-left: auto;

  /* Override inherited style from `.parent` */
  text-align: left;

  /* Relative to stacking context `.foo`. */
  z-index: 1;

  border: 1px solid black;
  border-radius: 4px;
  /* Clip contents to inside rounded border */
  overflow: hidden;
}

Flexbox: prefer `auto` margins over `justify-content: space-between`

When we need to push a flex item to one side (top/right/bottom/left), it's tempting to reach for justify-content: space-between. However, if we added another flex item later on, or if one of the other flex items isn't rendered for some reason, our flex item would not be positioned correctly. For this reason we prefer margin-left: auto (push to right) and margin-right: auto (push to left).

Avoid percentages

In most cases, percentages are no longer necessary now that CSS has modern layout modes such as flexbox and grid.

Percentages are not inclusive of flex/grid gaps.
Multiple percentage children may add up to more than 100%, causing overflow.

Flexbox and grid don't suffer from these problems because they use fractional units (e.g. grid-template-columns: 1fr 1fr 1fr or flex-grow: 1) which are inclusive of gaps and they are always a fraction of the child total.

For more information, check out "The problem with percentages in CSS" by Kevin Powell.

Avoid flow layout, prefer flexbox as the default layout mode

Flow layout is the default layout mode in CSS. This is a poor default because it was designed for laying out documents, but we're building an application. For this reason, we should generally prefer modern layout modes such as flexbox and grid. Maybe one day we can change the default to use flexbox.

OliverJAsh/README.md