Reading notes CSS In Depth

October 01, 2018 • 4 min read

I’ve always considered CSS a bit of an afterthought. It’s been something I add as quickly as possible with trail-and-error programming and help from Stackoverflow. This works well to some extend, but can also become frustrating: with trail and error and copypasting you won’t end up with a longterm solution, and bad CSS is as hard to maintain as bad JavaScript.

If you’re like me and you’ve been using CSS on a daily basis 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 focusses 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 have a tendency 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 the 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 browsers picks the largest and ignores the other one, i.e. only one margin is applied. This doesn’t happen when using flexbox 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 fontsizes 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 a 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 that became very easy using flexbox. 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: 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;
}

Discuss on TwitterEdit on Gitlab


Koen van Gilst

Koen van Gilst

Personal blog by Koen van Gilst. JavaScript developer, M.A. in Philosophy, former translator.