CSS Standards

Defaults for Charizard

Base font size: 16px (default).
Use px for everything

Adoption of CSS Modules

CSS Modules Over SCSS: New CSS files should exclusively use CSS Modules. Same setup our Hybr1d Frontend Repo

Usage of Inline Styles

Avoid Inline Styles: Refrain from using inline styles. Where necessary, reuse them and define them outside the component to maintain cleanliness and readability.

Global Styles

Global Styles File: Global styles are part of global.css files.
Example of Global Style:

.hui-reset-btn {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: transparent;

  color: inherit;
  font: inherit;

  line-height: normal;

  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

<button
    key={tab.value}
    onClick={() => selectFilter(tab.value)}
    className={clsx(
        'hui-reset-btn',
        classes.filterBtn,
        selectedTab === tab.value && classes.active,
    )}
>
    {tab.label}
</button>

CSS Variables

In order to maintain consistency and scalability in our styling, we use CSS Variables extensively. These variables are centralized and defined in the _variables.css file in the repository.

Example of CSS Variables

:root {
  --neutral-arch-800: #79799b;
  --neutral-arch-900: #616189;

  /* Theme colors */
  --theme-blue: #254dda;
  --theme-blue-gradient: linear-gradient(180deg, #6d88e6 0%, #5877e2 100%);
  --theme-blue-dark: #2145c5;
  --theme-royal-blue-tint: #4e6ee1;
}

Concise and Descriptive Class Names

Clear Naming: Use short, yet descriptive, class names. This approach enhances readability and makes it easier to understand the styling purpose at a glance.

Dynamic Class Names with `clsx`

Flexible Styling in React: Utilize the clsx library for dynamically applying class names in React components. This is particularly useful for conditional styling based on component states or props.

// Example of using clsx for dynamic class names
import clsx from 'clsx'

const Button = ({primary, children}) => (
  <button className={clsx('btn', {'btn-primary': primary})}>{children}</button>
)

Avoid Inline Styles

One of the key best practices in modern web development is to avoid using inline styles in our React components. While inline styles can be convenient for quick fixes, they generally lead to less maintainable and less scalable code. Here are some reasons why we avoid inline styles and what we use instead: