Reading notes CSS In Depth

I've always considered CSS a bit of an afterthought. It's been something I added as quickly as possible with trial-and-error programming and help from StackOverflow. This works well to some extent, but can also become frustrating: with trial and error and copypasting you won't end up with a long-term solution, and bad CSS is as hard to maintain as bad JavaScript.

If you're like me and you've been using CSS daily for years without taking the time to understand it fully (and you've always been wondering why it feels so buggy) then CSS In Depth is for you.

The approach of the book is simple: The author, Keith J. Grant, doesn't do any fancy layouts but focuses on a fundamental yet practical understanding of CSS. The examples he gives cover about 95% of all the CSS you'd generally need.

And since I tend to forget things, I've gathered some of the snippets and tips that Keith gives in his book. They're here for me, but maybe you'll find them useful too!

General tips

• Don't set fixed heights (like height: 100%). Let the browser take care of that. Use relative units (i.e. em and rem) for sizes and avoid using px. See the code samples below on how to do this for both small and large screens.
• Be aware of margin collapsing: of the top and bottom margin between two elements the browser picks the largest and ignores the other one, i.e. only one margin is applied. This doesn't happen when using flex box or when setting padding and/or border size.
• For menu items you can add a margin to all items except the first with a so-called lobotomized owl using:

* + * {
  margin-left: 1em;
}

Responsive sizes

If you want the font size (and sizes related to this) to grow with the screen size, you can use the following formula for setting the root font size:

:root {
  font-size: calc(0.5em + 1vw);
}

On larger screens, the font size will now scale accordingly. On smaller screens, it will use a minimum of 0.5em.

Using this in combination with the following will make your layouts responsive without the use of any media queries (this is sometimes also called fluid design). For instance, for your buttons you could use:

button {
  font-size: 1em;
  padding: 1.5em;
}

In this case the padding will grow with the font size for larger screens, maintaining the same aspect ratio. Note that in this case the padding of 1.5em is based on the font size defined above. Changing the font size of the button to 2em will also result in larger padding. This is useful if you want to create a larger button with a minimum amount of code.

button .large {
  font-size: 2em;
}

rem versus em

Rem is short for root em. This means that instead of being relative to the element, this em is relative to the root element, i.e. 1rem is always the same value no matter where you apply it in the document. It's very predictable and similar to the px unit in this regard. When should you use rems and when ems? About that, Keith says the following: "My default is to use rems for font sizes, pixels for borders, and ems for most other measures, especially paddings, margins, and border-radius (though I favor the use of percentages for container widths when necessary)."

Equal height columns

One of the standard problems in CSS became easy using flex box. Consider the following HTML:

<div class="container">
  <main class="main">...</main>
  <aside class="sidebar">...</aside>
</div>

Using the following CSS you'll get two columns of equal height:

.container {
  display: flex;
}
.main {
  width 70%;
}
.sidebar {
  width: 30%;
  padding: 1.5em;
  margin-left: 1.5em;
}

Flexbox nav bar

Another standard CSS implementation is a horizontal nav bar at the top of the screen. Consider the following HTML:

<nav>
  <ul class="site-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li class="nav-right"><a href="#">About</a></li>
  </ul>
</nav>

And with this CSS, you'll end up with the commonly used nav bar:

.site-nav {
  display: flex;
  padding-left: 0;
  list-style-type: none;
}
.site-nav > li > a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.site-nav > li + li {
  /* every list item that follows another, i.e. all but the first */
  margin-left: 1.5em;
}
.site-nav > .nav-right {
  margin-left: auto;
}