Minimal is never easy - Responsive is Hard - My Technical Documentation Project

Minimal is never easy - Responsive is Hard - My Technical Documentation Project
0

#1

I put in a lot of effort into this project, and man did it cause me headaches.
I’m happy with the results, but looking to improve my Vanilla CSS.
Let me know what you think.


#2

Looks good.

  1. Is there a reason why you are declaring the variables on the universal selector (*) and not on the :root pseudo-class?

  2. I would remove the overflow-y: scroll; on main, but maybe add an overflow to the nav. If you do want to use it on the nav, and use it with auto overflow-y: auto; the nav would need 100%/vh height, which you would need to remove on the mobile layout break point.

  3. Maybe give the nav links a little more love, make it look less default, just if you want to.


#3

I was unaware of a root selector. Is there a reason why using the universal selector is bad practice for CSS variables?


#4

The :root pseudo-class is a perfect match for globally declaring custom properties (css variables), it matches the root element, i.e. it’s like the html selector, except that its specificity is higher. It basically acts as the global scope for the variables.

In general, the universal selector should be used sparingly. I would suggest mainly using it for setting the box-sizing and maybe zeroing out padding and margin. Remember it matches everything, so any rules in the selector has to be matched against by the browser for all elements on the page. It also has zero specificity, which may in some cases cause issues.

Just a quick note. This is the latest best practice for setting box-sizing, you can read about it here:

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

Side note: There are different schools of thought about how best to use css variables, it’s still a new(ish) concept. One argument i have seen, is that global variables should be static, and that preprocessor variables are better suited for this. Where as custom properties are dynamic and should be used more on a component level. You can read more about this idea, in this rather long article.


Also, this articles section on Scope And Inheritance, might be helpful.


#5

Interesting. Thanks for the articles.


#6

Actually, now I’m confused. shouldn’t we then just use the root psuedo class to set margins, padding and box-sizing?


#7

“Pseudo-class selectors (but not pseudo-elements) have a specificity equal to that of a class, which is higher than a basic element selector” (source). This makes overwriting them later more difficult.

// background will be red.
:root {
  background: red;
}

html {
  background: blue;
}