Base styles

Some people like to complain about the cascade with CSS, but without the cascade and inheritance, CSS would be much more painful to write.

When I talk about base styles, I'm talking about the ones that set the stage for the rest of the project.

They tend to be very general and low specificity (often element selectors).

Using @layer also helps with this, as it allows easily overwrite higher specificity selectors in higher-priority layers.

This combination means they do a lot of heavy lifting for us, but are also very easy to overwrite when we need to.

For example:

@layer base {
  /* custom properties here */

  body {
    font-family: var(--ff-body);
    font-size: var(--font-size-regular);
    color: var(--text-main);
    background-color: var(--background-main);
  }
}

A few more styles for our headings and links, and things are already looking half decent!

If I've already mentioned what layer we're working in, I won't keep repeating it in the code blocks.

h1,
h2,
h3,
h4 {
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--text-high-contrast);
}

a {
  color: var(--text-high-contrast);
}

a:hover,
a:focus-visible {
  color: var(--text-brand-light);
}

In general, we want to start as generic as possible, so that we can write the least amount of CSS as possible.

Generic classes vs. element selectors

When writing more general styling, for some things I use element selectors, like those in the examples above, and other times I use class selectors.

One example of this is for our heading levels. We can style our headings with element selectors, and in this project we might even be able to get away with it.

The problem with doing that is it means that you are using the headings for what they visually look like, rather than their actual hierarchy.

When it comes to semantic selectors, I prefer separating concerns as much as possible.

Heading levels class examples

.page-title {
  /* ... */
}
.section-heading {
  /* ... */
}

/* alternatively, you could do this: */
.hero__title {
  /* ... */
}

.section__title {
  /* ... */
}

/* alternatively...: */
.h1 {
  /* ... */
}
.h2 {
  /* ... */
}
.h3 {
  /* ... */
}

/* and some people prefer a combo: */
h2,
.section-title {
  /* ... */
}

h3,
.card-title {
  /* ... */
}

For now, I'm going to hold off on creating anything here, but I thought it was important to bring up.

If you prefer styling the element selectors themselves, I would include those in the base layer here.