CSS

#css #style

Avoid having too much CSS/styles in the product code

Your Design System should use functional css to make it possible to extend it

Your design system should have constraints to avoid bad design

The design system should be able to change theme colors, as customers usually customize the product to their brand and workflow

functional css is a much better abstraction then other css approaches

css in js is better because of colocation

styled-components is a component + style

address the naming problem

convention naming

naming pattern

styled-system and tailwind follow naming convention to build functional css and compose styling.

saas, css modules, less, BEM does not address this problems

The product code should just be the use of building blocks from the design system

There is no shortcut for CSS, CSS has a lot of details, you need to keep adding keys and learn how they interact with each other

The build blocks for layout are flexbox and css grid, you should learn both.

Learn CSS

Flexbox and CSS grid can solve most of the layout problems

• https://flexboxfroggy.com/
• https://cssgridgarden.com/

Prebuilt blocks

• https://github.com/mertJF/tailblocks

Links

References

• https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

• https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635

CSS Practice

• https://blobs.app/?ref=producthunt