Styling

Styling

The website relies on Styled Components for its CSS. This was chosen over other methods of styling react components such as global css, or css modules because of several cool features of Styled Components:

• Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
• Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
• Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
• Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

Getting Started

styled-components utilizes tagged template literals to style your components.

It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.

This example creates two simple components, a wrapper and a title, with some styles attached to it:

import styled from "styled-components" 

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
const Example = () => {
   return (
      <Wrapper>
         <Title>
            Hello World!
         </Title>
      </Wrapper>
   )
}

For a more in-depth look at the other features of Styled Components take a look at the documentation.

Important Files for Styling

globalStyles.js

In this file are the global css styles. This is akin to the styles found under the root tag in a normal css layout.

theme.js

This file will hopefully standardize styles used throughout the project. Coming from normal css, this mirrors css variables. This file will usually have to be imported to any page that you are working on. One thing to note is the way the colors are named as <color>100 through <color>900 where 100 denotes a lighter shade with the shades darkening as the numbers increase. These were generated by using the website Shadowlord and setting the % to 20.