A big part of building an application is making it aesthetically pleasing and easy on the eyes. This ensures that users will have an easy time navigating the application as well as just overall having a good time looking at the contents.

Issue to address

A common issue in using CSS to style applications is that there are plenty of ways to specify things.

Size

For example, we can use px, em, rem and % to address sizes. If we aren't careful, we will end up with px for some text and em for others. And when we have nested div's we may also have uncontrollable em sizes too!

colors

When creating an application, the colors we choose to use will have a great impact in the overall theme and feeling a user experiences when looking at the contents. Picking the right sets of colors is very important, and keeping the colors consistent is even more important.

This brings us to the topic of theming in CSS. Theming essentially means using a set of reusable values throughout our stylesheets, offering flexibility, maintainability and consistency. Not only does it make our applications look clean and intentionally designed, it also makes it easier to manage new changes and be more dynamic.

Creating CSS Variables

To create CSS variables, we simply have to use the following code

:root {
/* Colors */
--background-color: #5C6F68,
--primary-color: #A4F9C8,
--secondary-color: #A7FFF6,
--tertiary-color: #95D9C3,

/* Sizes */
--s1: 12px,
--s2: 16px,
--s3: 20px,
--s4: 32px,
--s5: 48px
}

With these CSS variables setup, we are now able to stick to a set of standardized colors and fonts. To access the variables, all we have to do is call these variables from elsewhere when we need it. For example,

<!-- html  -->
<body>
    <h1> Hello </h1>
    <p> Hello World </p>
</body>

/* css */
h1 {
    color: var(--primary-color);
    font-size: var(--s4);
}

p {
    color: var(--secondary-color);
    font-size: var(--s2);
}

By using CSS variables, our css code will look very neat and easy to read. With an much larger CSS file, using CSS variables will allow us to change the entire theme of the application if we had decided to change the color schemes. An example of such use case is the dark mode feature for certain applications, where a toggle will change the whole color scheme of all the components.

Additional CSS variables tips

When styling with CSS, we often run into problems with viewport sizes, which can ruin or distort the contents of or components. A strategy that I have learned to help mitigate these issues is the clamp() method in CSS. The clamp method takes in three arguments clamp(a minimum value, a preferred value, a maximum value). This allows the sizes of our contents to dynamically change depending on the size of the viewport, which can help us write less media-query code, and ultimately make our application look more consistent.

A quick and easy tool that we can use to create these custom CSS font size variables is the type calculator by Utopia. (https://utopia.fyi/type/calculator)

Clicking into the link, we will be able to designate the minimum and maximum viewport size, as well as how many steps of font-sizes we desire. Utopia would generate a block of CSS code that we can simply copy and paste into our CSS :root.