Research whether to use monolith or component specific CSS-structure #166

New issue

Closed

opened 2026-04-08 06:47:30 +00:00 by a24vinla · 2 comments

a24vinla commented

2026-04-08 06:47:30 +00:00

Collaborator

Which of the two CSS-structures will be most efficient for us to use.

Parent Issue: #31

Which of the two CSS-structures will be most efficient for us to use. Parent Issue: #31

a24vinla added the

design

frontEnd

research

labels

2026-04-08 06:47:30 +00:00

b23albst was assigned by a24vinla

2026-04-08 06:47:30 +00:00

b23albst commented

2026-04-09 00:19:25 +00:00

Collaborator

So, the structure of css I think we should go for should utilize css data attributes/attribute selectors.

The short version of how it works is that we have a central css file (theme.css) that defines sets of attributes (data-style). In each set, the same variables are defined with different values. This means that you can change the style of all components that use these variables in an easy way. So we have one large css file with all styles. Then components can use the variables from that file in their own css to have the component change color when the style is changed.

Here is my proposed template for the data attributes:

[data-style='name'] {
--color1:
--color2:
--color3:
--color4:

--color-text:

--card-color-bg:
--card-border:
--card-box-shadow:
--card-title-color:

--font-sans:
--text-base:
}

Colors 1 through 4 are the four hues of one of the color palettes (Webpage design). These variables can be used to style components. They are in order from dark to light, so the contrast between dark/light should be similar between the styles. Color text is the text color for the style.

The variables starting with --card are used in a different way. They are the to be used in card to define the cards colors.

The idea is that by assigning these with the values of colors1-4, different styles can use different hues for eg. background of the card. As an example, the rubine style could use --color1 for the background of the cards, while the safir style could use color3.
The last two variables are for font and text size.

Here is an example of how it could look

This image might be confusing, since I'm using css light-dark() to handle light and dark mode as well, but I think you can still see the structure. At the top, the color palette is defined. These can be used in the css for components, but they are also used to define the following variables (for text color, card etc.).

My idea was to make accessing the styles easy for those developing components (using --color1 to 4 variables), while also giving some creative freedom to the people making the styles (deciding the look of cards in that particular style).

Is this understandable? These changes are available in the branch #31-support-for-different-styles

So, the structure of css I think we should go for should utilize css data attributes/attribute selectors. The short version of how it works is that we have a central css file (theme.css) that defines sets of attributes (data-style). In each set, the same variables are defined with different values. This means that you can change the style of all components that use these variables in an easy way. So we have one large css file with all styles. Then components can use the variables from that file in their own css to have the component change color when the style is changed. Here is my proposed template for the data attributes: [data-style='name'] { --color1: --color2: --color3: --color4: --color-text: --card-color-bg: --card-border: --card-box-shadow: --card-title-color: --font-sans: --text-base: } Colors 1 through 4 are the four hues of one of the color palettes ([Webpage design](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design)). These variables can be used to style components. They are in order from dark to light, so the contrast between dark/light should be similar between the styles. Color text is the text color for the style. The variables starting with --card are used in a different way. They are the to be used in card to define the cards colors. ![image](/attachments/b163d57f-fde6-4600-9b72-4112d7657bf3) The idea is that by assigning these with the values of colors1-4, different styles can use different hues for eg. background of the card. As an example, the rubine style could use --color1 for the background of the cards, while the safir style could use color3. The last two variables are for font and text size. Here is an example of how it could look ![image](/attachments/4169fa40-6dd1-4d0a-910a-21b78ede3cf6) This image might be confusing, since I'm using css light-dark() to handle light and dark mode as well, but I think you can still see the structure. At the top, the color palette is defined. These can be used in the css for components, but they are also used to define the following variables (for text color, card etc.). My idea was to make accessing the styles easy for those developing components (using --color1 to 4 variables), while also giving some creative freedom to the people making the styles (deciding the look of cards in that particular style). Is this understandable? These changes are available in the branch [#31-support-for-different-styles](https://git.webug.se/Andras/BoundlessFlowCampus2K/src/branch/%2331-support-for-different-styles)

image.png

29 KiB

image.png

52 KiB