![]() Both libraries offer powerful design system configuration but-crucially-did not lock me into specific component architectures. With design systems and customization in mind, I narrowed down my options to Tailwind and Theme UI, which is powered by Emotion, a CSS-in-JS library. Using CSS Modules would result in the same amount of work for the same result as a customized Bootstrap. But, if customization is the default posture, the efficiencies of Bootstrap are lost. In past projects, I have rewritten and redefined large portions of the Bootstrap library to customize style variables and components the configuration did not allow to be customized. However, Bootstrap's biggest feature-those pre-made components-can be its biggest flaw.īootstrap is a closed system. It is an excellent choice for pre-made components. ![]() Twitter's Bootstrap pioneered the concept of a CSS framework and component library. Constructing a visually imbalanced layout or component becomes more difficult than with CSS Modules and no design system in place. Constraints on styling choices ensure available options work together harmoniously. Updating the value of color-success becomes a single-line change that propagates to all instances of that token while retaining the same intention.ĭesign systems define intention across all aspects of a user interface, from simple colors to complex components. ![]() It abstracts out specific values in favor of generic tokens or variables.įor example, a color palette will use names communicating intention, like color-success or color-warning, instead of literal values or color names, such as green or #FFA500. What is a design system?Ī design system is a collection of reusable components and styles for building a cohesive user interface. I needed a styling approach both powerful and expressive with utilities to create and maintain a design system. As a frontend team of one, this was a deal breaker. The biggest drawback to CSS Modules is the lack of design system utilities. Defining margin-top: 0 multiple times in different CSS files will not be mitigated by CSS Modules. Additionally, locally scoping CSS class names and IDs do not prevent duplicate CSS in other files. ![]() But, preventing global CSS removes the expressive power of the “cascading” part of Cascading Style Sheets (CSS). The advantages of CSS Modules are the elimination of CSS conflicts across files due to local scoping, explicit dependencies, and the prevention of global CSS. Import css modules stylesheet as styles ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |