Skip to content

docs: updated the styling ADR to include details about how to work wi… #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesrisenmay-mx merged 1 commit into from
Aug 13, 2026
Merged

docs: updated the styling ADR to include details about how to work wi… #362

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion architectureDecisionRecords/0001Styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,18 @@ Tailwind pollutes your jsx with a lot of classnames, and requires you to learn a

CSS modules gives a lot of the benefits of styled components, but with faster performance. Using CSS modules will keep our basic css skills in tact.

We also need to work with both CSS modules and MXUI. MXUI uses [MUI](https://mui.com/) under the hood, which provides its own styling mechanisms (the `sx` and `xs` props). This means we need clear guidance on when to reach for CSS modules versus MUI's built-in styling props.

## Decision

We will use CSS modules to style our html.

When we need to add spacing between two elements, we should use a MUI [Stack](https://mui.com/material-ui/react-stack/) with a `spacing` prop.

When styling elements we should use CSS modules instead of using the `sx` or `xs` props that MUI provides. The only exception to using the `xs` prop is if you need to write breakpoint specific code. MUI does not expose its breakpoints as css theme variables.

When using a Stack we can use all the flexbox related props directly on the Stack except for `gap` and `flexDirection`. We should use the Stack's `direction` and `spacing` props instead. This allows us to quickly write layout code without having to make specific classes for every stack.

## Consequences

We will have a performant and easy to use system for styling.
We will have a performant and easy to use system for styling that works consistently across CSS modules and MXUI/MUI.
Loading