Consolidating styling across the site (Regular CSS? Tailwind? Other framework?)

[kevmodrome]

Currently the site is using a mishmash of all sorts of CSS. There's some Tailwind in there, some proper CSS as well as some homemade functional style classes. We should consolidate into using one design system and be very strict going forward, when it comes to adding CSS.

Personally I like regular CSS with a heavy use of custom properties. I find it very powerful and it marries well with Svelte's <Component --someVar="red" /> functionality. Here's how a button would look using this kind of style: https://svelte.dev/repl/952913f9925e433dacf701f9d9c90d4a?version=3.42.4

Other people prefer Tailwind.

Are there other types of frameworks we might want to use?

Please voice your opinion on which type of styling we should use.

[brittneypostma]

I think at this point it would be more work to continue reworking tailwind in, than it would be to rip it out. I am good with CSS Variables or Tailwind, however, I agree with @kevmodrome that I like the use CSS Variables provides with the Component functionality and a majority of the site is already configured that way. I think there should be a firm design system set in the custom variables to keep consistency through the design. Possibly even adding a test to check and make sure pr's are using these.

[kevmodrome]

We need a design system, regardless of which way we go, I think. We don't want to mix and match colors, spacing, etc. 🤔

[diepoe]

I used tailwind a lot last times, but I clearly see the con's of it (like big class attributes etc.). But a very big plus for tailwind is the whole design system (with spacing, colors), this brings more consistency to the designing (which was a little bit messy on the old site without tailwind).

I also would recommend using the headwind extension with tailwind, which keeps the tailwind classes ordered.

[kevmodrome]

Since we already have some colors that we need to use I don't think Tailwind helps a lot in that case. The amount of work is pretty much the same.

Here's an example of how the "setup" would look like:

:root {
    --primary: #123456;
    --primary-hover: #123456;
    --primary-active: #123456;
    --secondary: #123456;

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 12px;
    --space-l: 16px
    ...
}

I'd like to keep it as easy as possible for newcomers to contribute and I'm unsure about TW being the easiest way. 🤔

[brittneypostma]

Either way we go there is going to be an issue of people sticking to the design system. With tailwind, even though there is a good base for spacing and typography, people could use different numbers all over the site. Same goes for custom variables, I'm sure people will use different ones. I propose that we add more element styles in the root css file using the custom variables and remove most of the component level styles to avoid consistency issues.

[kevmodrome]

Yes! I like this a lot. More "proper" classes.

[benmccann]

I'm not married to Tailwind at all, but the issue I had when trying to contribute with the previous design system is that there was no documentation. The thing I liked about Tailwind is that it's well-known and well-documented how to do certain things, which makes it a bit easier when a bunch of different people are working on the site. It also has relatively decent defaults and made the site look a lot nicer when I added it by having better defaults for things like page width, font size, etc.

[brittneypostma]

I agree that tailwind has great base styles, but at the moment they aren't being implemented consistently. Spacing is up to whoever styled the component. It can make styling a lot easier if you know what you're doing, but can be inconsistent if not done by the same person. That being said, the same thing could be done with Tailwind as with custom variables. Moving more styles up and using @apply to style them more consistently. I do think this will be more work though.

[PuruVJ]

Plain (s)css floor the win

[stephane-vanraes]

I would go for plain vanilla css with a heavy use of custom variables.
But also have plain sane settings for things like headers (like all h2s should simply be the same over the entire site).
As was mentioned earlier, some colours and spacings are already defined, all it takes is to ask contributors to use them, which means rejecting all PRs that have something like padding: 4px; instead of padding: var(--space-xs)
If necessary a handfull of utility classes could be added in the global stylesheet as well.

[kevmodrome]

Yes, I think I'm leaning towards this.

[brittneypostma]

This sounds great! I started a Figma file to start pulling in the design system. Some of the colors weren't accessible and still some work to figure out how to fix it throughout the site. I will create an issue, if one hasn't been made, to start the new design system. I would like to get the structure organized so it is easier to find the variable to use. Does anyone have a preference of @ or $ for aliases? I would like to set some up.

[kevmodrome]

Here's an issue I created that we can use to track the implementation: #91

[kevmodrome]

Tailwind and eventually Symphony (our own design system) is what we'll use.