Use native CSS

[shyim]

You don't need SCSS in 2024 anymore, you can do everything with plan CSS variables, CSS nesting and so on.

We should really consider removing SCSS, and sticking to simple stuff

[sydinh]

Yes, plain CSS variables and CSS nesting, among other features, can accomplish a lot. However, it's important to note that some features might not be supported in all browsers or require specific workarounds to be used effectively.

CSS nesting is not a standard feature and is not supported in plain CSS. It's commonly used in preprocessed languages like Sass or Less or with the PostCSS plugin.

After using a combination of SCSS and BEM for a while, I believe this combo is a very effective approach for writing maintainable and scalable CSS.

[shyim]

However, it's important to note that some features might not be supported in all browsers or require specific workarounds to be used effectively

That is why we have polyfills, or tools that can downgrade the CSS to have more compatibility. In that way, you always use the newest Tech and can drop the downgrading without further adjusting the code.

CSS Nesting is kinda of the baseline for every Browser since last year: https://caniuse.com/?search=CSS%20nesting . There is no reason not to use it. We are talking here about components that are used by Administrative users; you don't have to care about compatibility so much, and when you can use tools as mentioned.

[Haberkamp]

That's the direction we want to go. Though before we can do that we have to migrate all the SCSS variables to tokens. Which we can't to immediately because tokens for things such as spacing or typography are in the process of being defined by the design team.

[bschulzebaek]

I'd like to highlight this topic again since we started to actively use the Meteor components in other projects now. Depending on the components we use, SCSS becomes a necessary dependency and part of our "local" tooling as well. This is also contradicting to Frontends-based projects which follow a different approach with UnoCSS - which would also benefit from design tokens.

[Haberkamp]

I've started to remove scss from some components. Though at the moment the progress is not much. Here's a list with all components.

Components using plain CSS:

• mt-pagination
• mt-data-table-settings
• mt-data-table-reset-filter-button
• mt-data-table-filter
• mt-data-table-text-renderer
• mt-data-table-price-renderer
• mt-data-table-number-renderer
• mt-data-table
• mt-popover-item-result
• mt-popover-item
• mt-modal-root
• mt-modal
• mt-tabs
• mt-segmented-control
• mt-search
• mt-link
• mt-empty-state
• mt-card
• mt-icon
• mt-avatar
• mt-url-field
• mt-text-area
• mt-switch
• mt-slider
• mt-password-field
• mt-number-field
• mt-help-text
• mt-external-link
• mt-datepicker
• mt-colorpicker
• mt-checkbox
• mt-button
• mt-select-selection-list
• mt-select-result
• mt-select-result-list
• mt-select-base
• mt-inheritance-switch
• mt-field-error
• mt-field-copyable
• mt-base-field
• mt-toast
• mt-toast-notification
• mt-skeleton-bar
• mt-progress-bar
• mt-loader
• mt-color-badge
• mt-banner
• mt-context-menu-divider
• mt-context-button
• mt-text
• mt-popover-deprecated
• mt-floating-ui
• mt-label
• mt-highlight-text