On Learning CSS... Better

I am by no means really good at design, but I really do appreciate it and I don't think I am completely hopeless at some level of aesthetic. You may be giving me some side eye right now because the design of this website is not good, but I am learning and my focus of learning is more towards how to implement design rather than actual design principles. So, naturally, the best thing you can learn to make things looks nice is the ever prevalent CSS! I, like many other new-ish fullstack developers, have the knowledge and ability to produce most given or desired design, but to do it well, that is a skill I am looking to grow.

For pretty much any project I have worked on, I used a styled UI library like Bootstrap or Material, but when I started this portfolio and blog project, I came in with the desire to build all the components and styles myself. So far, it has been a fun process, but in some ways a little frustrating because I don't know what is designed right. I know that there are principles behind typography usage, white space, line heights, etc. — the list goes on. That is just not my strong suit. What I was interested in, was making things look good enough and using the styling approach that came set up with my Sanity Gatsby starter.

The starter came set up with Modular Stylesheets where:

CSS rules are written traditionally but consumed with JavaScript and scoped locally to avoid unintended side-effects elsewhere. Works out-of-the-box with Gatsby. — Gatsby Styling Docs

This approach was new to me, but easy to pick up. Essentially, for any React component you want to style, you will create a stylesheet along side it. So let's say you have header.js, you will also create header.module.css to style that component. Then your JSX file will look something like this:

1import { Link } from "gatsby";
2import React from "react";
3import { StaticImage } from "gatsby-plugin-image";
4import * as styles from "./header.module.css";
5
6const Header = () => (
7  <div className={styles.root}>
8    <div className={styles.wrapper}>
9      <div className={styles.branding}>
10        <Link to="/">
11          <StaticImage
12            src="../../images/seedling_1.png"
13            alt="Seedling Icon"
14            width={35}
15            height={50}
16          />
17        </Link>
18      </div>
19
20      <nav className={styles.nav}>
21        <ul>
22          <li>
23            <Link to="/" activeClassName={styles.active}>
24              Home
25            </Link>
26          </li>
27          <li>
28            <Link to="/about/" activeClassName={styles.active}>
29              About
30            </Link>
31          </li>
32          <li>
33            <Link to="/blog/" activeClassName={styles.active}>
34              Blog
35            </Link>
36          </li>
37          <li>
38            <Link to="/work/" activeClassName={styles.active}>
39              Work
40            </Link>
41          </li>
42        </ul>
43      </nav>
44    </div>
45  </div>
46);
47
48export default Header;

And then the styles sheet would look like this:

1@import "../styles/custom-media.css";
2@import "../styles/custom-properties.css";
3
4.root {
5  position: relative;
6  z-index: 100;
7}
8
9.wrapper {
10  box-sizing: border-box;
11  margin: 0 auto;
12  max-width: 1200px;
13  padding: 0.5em;
14  display: flex;
15
16  @media (--media-min-small) {
17    padding: 1.5em 1.5em;
18  }
19}
20
21.branding {
22  font-weight: 600;
23  flex: 1;
24
25  @nest & a {
26    display: inline-block;
27    padding: 0.5em;
28    color: inherit;
29    text-decoration: none;
30    background: var(--color-dark-gray);
31    border-radius: 50%;
32    width: 50px;
33    height: 50px;
34  }
35
36  @media (hover: hover) {
37    @nest & a:hover {
38      background: var(--color-accent);
39    }
40  }
41}
42
43.nav {
44  @nest & ul {
45    margin-top: 1em;
46    padding: 0.5em;
47    display: flex;
48    list-style: none;
49  }
50
51  @nest & .active {
52    text-decoration: underline;
53    color: var(--color-sage-green);
54  }
55
56  @nest & ul li a {
57    color: inherit;
58    display: block;
59    text-decoration: none;
60    margin-left: 1rem;
61  }
62
63  @media (hover: hover) {
64    @nest & ul li a:hover {
65      color: var(--color-accent);
66    }
67  }
68}

So, there are a few things I learned from this set up and so I will break them down. First, is the two imports for the custom-media.css and the custom-properties.css files, allows the modularization of custom properties like font-family, color variables, typography, and media sizes. These kind of act like variables you can use in other files. The second thing I learned was the @nest rule, it took me longer than I care to admit to fully grasp this syntax, but essentially it is just a better looking way (syntactic sugar if you will) to nest style rules. Also, it makes nesting easier because you don't run into issues that would make the style you wrote invalid from writing a really complex selector situation. You can read more about it here. So after figuring out how CSS modules fits into the whole ecosystem of different approaches to styling. I was able to start playing around by getting inspiration from different websites and dribbble. I can now look at a website and see the transitions used on a image or button and have a good idea on how they were able to implement this. Another thing I do is when I see something cool on a website that I want to know how they did, I will just open the inspect tool for the web dev tools in the browser and parse out how they used CSS to make the cool styling.

I have by no means gotten really good at CSS, so far, but I have definitely improved my knowledge and skill set as I have worked on this project. I will probably not continue with writing all of my CSS on my own for every project, but it is fun to play around with it for something smaller like this. For my personal project I am starting, a baker's log, I will probably explore Tailwind CSS. Onward and upward!