Thread to document different options of styling

[cmanolescu]

Goal for this task is to document all the options on the table so the team can read through and comment on the options.

A decision should be made on the style moving forward

[owen26]

To keep things concise I want to put a few options on the table that I think make sense for Kobot project, considering the project, team, and current open source eco system around React.

1) Vanilla CSS

Just write plain vanilla CSS. Vite.js handles the import for each of the component.

What it looks like

import './StyleWithCss.css';

export const StyleWithCss = () => {
  return <button className="kobot-button">Style with CSS</button>;
};

.kobot-button {
  width: 200px;
  border-radius: 8px;
  background-color: #ea4c89;
  color: #ffffff;
  transition: background-color 500ms;
  list-style: none;
  text-decoration: none;
}

.kobot-button:hover {
  background-color: #f082ac;
  border-color: transparent;
}

.kobot-button:focus {
  outline: none;
}

Pros

• No learning curve as long as you know CSS

Cons

• Naming css classes can be a pain
• Not scopped styling by default unless using css modules, easy for causing bugs
• Having to manage 2 separate files for a single component
• Verbose syntax for defining nested styles
• Hard to customise styled by component props

2) Styled Component

SC has been a go-to choice for React project styling for many years and still considered so for many developers. It emphasis treating styles in the same way as components, fitting into the same mental model for React devs. https://styled-components.com/

What it looks like

import styled from 'styled-components';

const StyledButton = styled.button`
  width: 200px;
  border-radius: 8px;
  background-color: #ea4c89;
  color: #ffffff;
  transition: background-color 500ms;
  list-style: none;
  text-decoration: none;

  &:hover {
    background-color: #f082ac;
    border-color: transparent;
  }

  &:focus {
    outline: none;
  }
`;

export const StyleWithStyledComponent = () => {
  return <StyledButton>Style with Styled Component</StyledButton>;
};

Pros

• Same mental model as developing React component
• Has been around for many years and maintained consistently
• Powered by SASS/LESS like preprocessors to avoid verbose syntax
• Minimum learning curves since it’s still “CSS”

Cons

• Considered a bit “old” by some people
• Less flexible for defining customisable props, comparing to css-in-js alternatives

3) Tailwind

TailwindCss has always been a controversial css framework due to it’s drastically different DSL for styling UI compare to raw CSS syntax. https://tailwindcss.com/

What it looks like

export const StyleWithTailwind = () => {
  return (
    <button
      className="
      w-200 
      rounded-s-lg 
      bg-rose-500 
      hover:bg-rose-200
      transition-colors
    "
    >
      Style with Tailwind
    </button>
  );
};

Pros

• The unique way using dynamic utility classes for styling considered very productive for some devs

Cons

• Steep learning curve if not familiar

4) stylex

This is a very new css-in-js framework open sourced by Meta recently. https://stylex-docusaurus.vercel.app/

What it looks like

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    width: 200,
    borderRaius: 8,
    color: '#ffffff',
    transition: 'background-color 500ms',
    backgroundColor: {
      default: '#ea4c89',
      ':hover': '#f082ac'
    },
  },
});

export const StyleWithStyleX = () => {
  return <button {...stylex.props(styles.base)}>Style with StyleX</button>;
};

Pros

• Very modern framework, emphasis predictability and composability
• Got all the benefits of css-in-js solutions
• Maintained by Meta, the same company behind React

Cons

• Still in Beta stage
• Slightly steeper learning curve involved, compare to styled-components, but not as much as tailwind

[yono10]

Thanks for the great summary @owen26 - amazing work as usual.

For me, any of these options beyond the vanilla CSS will be a learning curve 🙂 , but am up to use a more modern option anyway if the de facto approach used by web developers these days is to utilise one of those frameworks. And on that, with my minimal experience but just getting a feel from this summary, I would say my preference leans towards the SC (option 2), as it feels easier to understand / less magical ?

On the other hand - on CSS with modules, how would that look like? Would that be the route you'd recommend anyway if we were to choose option 1?

[immutable-pro]

Amazing summary @owen26. I don't have a strong preference:

1. CSS modules before (mentioned in the cons of Vanilla CSS) ← I have extensively used it before.
2. Styled components ← I have extensively used it before.
3. Tailwind (I have a few reasons for disliking Tailwind, but I understand that it helps to move fast once you know it). ← We use it mixed with CSS modules in my current project, mostly because it has nice layout shortcuts.

Disclaimer for 1: I would never go with Vanilla CSS, but with CSS modules is great (the scoping reason alone, it is enough to consider).

I would not mind giving a go to stylex if any of us has experience with it. Otherwise, it is scary to adopt a Beta tech.

[owen26]

Have discussed with the team and agreed to go with Styled Component as the choice of CSS framework for implementing this kobot new design.