CSS Standards and Best Practices

Defaults for hybr1d-frontend repository

• Base font size: 13px (and not the default 16px).
• https://www.ninjaunits.com/converters/pixels/pixels-rem/ can be used to convert px to rem manually
• or use Figma plugin to get typography in rem
• Use rem for typography and px for “box model” (spacing, etc).

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. We are currently transitioning from SCSS to CSS Modules in all our codebases.
• Avoid SCSS for New Files: Refrain from using SCSS in new CSS files.

Naming Conventions for CSS Files

• Feature-Level Components: Use styles.module.css for regular feature-level component styles. There’s no substantial benefit to naming it component-name.module.css.
• Common Components: For common components in the hybrid-ui/* folder, use descriptive names like button.module.css. This helps in debugging CSS issues since the consumer component might affect the styles.

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 hybr1d-frontend repository.

Example of CSS Variables

_variables.css

: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;
}

Best Practices in CSS

Adhering to best practices in CSS is crucial for creating efficient, maintainable, and scalable styles in our development projects. Below are some key guidelines that we follow:

Avoid Repeating Styles

• Reuse and Modularization: Encourage the reuse of CSS styles to avoid redundancy. Create modular CSS that can be shared across different components or features.

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:

Reasons to Avoid Inline Styles

• Maintainability: Inline styles scattered throughout JSX make the code harder to read and maintain. It’s easier to manage styles when they are separated from the component logic.
• Scalability: As the application grows, managing styles inline becomes cumbersome and prone to inconsistency.
• Performance: Inline styles can lead to performance issues, as they might cause more frequent re-renders.