This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
Tips and Tricks to Style Your Design System
A design system is a collection of design tokens, practices, and reusable components that helps keep things consistent for your design and product teams. Colours, typography, icons, and many more are related to styles that help determine how the brand is presented in the UI.
Therefore, when developing your design system, styling plays a vital part. It is critical to empower your brand identity and establish sustained branding and user experience standards.
In this article, let’s look at some facts you have to consider when styling your design systems.
Why Styling in Design Systems Important?
Styles play a significant role in improving user experience, and less style variation means lesser UI components. If you use a small set of UI components, your users will waste less time exploring your product and more time loving the experience.
Consistency in style and functionality allows users to foresee the results of actions taken in your application. And, it reduces the possibility of misunderstanding and the annoyance that comes with it.
CSS Architecture for Design Systems
When you hear the word “styles”, definitely the next word that tends to pop up in your mind is “CSS.”To get started with CSS, you don’t need a lot. You just need to apply a style to an element you’ve chosen. Isn’t it simple? But when things get complicated over time, you will need a CSS architecture for your design system.
When you are planning the CSS architecture for your design system:
- Reduce issues with inheritance and specificity.
- Use fewer styling rules for more efficient CSS and reusability.
- Make it long-term maintainable, and scale it up over time.
- It should be accessible and device-independent.
- All developers should be able to use it because it is well documented.
- Define coding styles, organization, and naming conventions.
CSS Architecture Methodologies
You can follow up on any CSS architecture methodology listed below according to your needs.
- SMACSS (Scalable and Modular Architecture for CSS)
- Atomic Design Theory
- ITCSS (Inverted Triangle CSS)
- BEM (Block, Element, Modifier)
Writing Modular code
CSS, on the other hand, isn’t designed to be modular. However, SMACSS, OOCSS, and BEM have incorporated structure and modularity into CSS over the years. Furthermore, CSS-in-JS strategies like Styled Components, which define CSS properties in JavaScript code structures, have tackled this issue lately.
To make it modular:
- Use object-oriented/ functional CSS.
- Separate structure from style and the container from content.
- UI patterns and components are abstracted into reusable snippets.
- Styles can also be defined for a single purpose.
Organize the CSS
Perform an audit and start creating an inventory of design patterns before coding for your design system. The next move is to organize the elements into categories like colours, typography, icons, and different UI patterns. Such groupings can be used to organize your CSS as well.
Then start writing CSS,
- Base Styles: Begin with the essential elements and define the base styles (e.g., CSS resets and default styles.)
- Colours: Make a colours palette and assemble the colours into groups (e.g., brand, accent, borders, etc.)
- Typography: Text-based styles including the font-size, font-weight, font-family/typeface, and typographic scale.
- Patterns and Components: Develop reusable components and combinations of patterns (if applicable).
Define Naming conventions
- Use lowercase letters and separate words with a dash.
- Keep names short but descriptive. (eg. .btn-alert vs. .btn-a)
- Use meaningful and functional names that describe the purpose. (eg. .btn-alert vs. .btn-red)
- Use the same class name as the prefix for related styles. (e.g.: .btn vs. .btn-alert )
- Use a prefix (or data-attributes) for JavaScript-specific classes to separate styles from behaviour. (eg: .btn vs. .js-btn )
Now, let’s move on to different approaches applicable in styling design systems.
Using CSS Utility Framework to apply styles
Tailwind CSS is among the most widely known and emerging solutions for developing a design system. It is a utility first open-source framework.
Without ever littering your stylesheets with arbitrary values, utility classes allow you to perform within the boundaries of a system. Moreover, they keep it simple to maintain consistency in colours, spacing, typography, shadows, and anything else that goes into a well-designed design system.
Tailwind lets you create customized designs without ever escaping HTML. Utility-first CSS encourages your team to add pre-existing classes explicitly in HTML rather than introducing new CSS classes every time they want to style a component. You can also use Tailwind to build a comprehensive CSS architecture from a configuration file that reflects all the elements in the design system.
Using this approach, we can identify some exciting advantages for the development team:
- Just write the config in JSON and configure it in JavaScript.
- In the config file, you can fully customize responsive breakpoints.
- Tailwind plugins are available to create SASS variables that can be independently accessible in web components.
- SASS and other preprocessors are supported.
- The markup helps the user visualize what something appears like.
- You never have to be concerned that modifying the styles would ruin something else.
- Its completely customizable by adding breakpoints, pseudo-classes, and other features in utility classes.
- No framework lock-in governs the appearance and feel of your buttons and other elements. Your design would be unique as a result of this.
Besides, one disadvantage is that using Tailwind might result in a huge CSS file due to the large list of classes created from the config file.
Styled-Components to Extend CSS
The most used components in a design system are buttons and text fields. But these Buttons, text fields, app bars, and other elements can’t be used to create an entire website/application. The best thing is to put these pieces together logically and thoughtfully.
Styled components are among the most popular CSS-in-JS libraries in this case. It facilitates you to use component-level styles written in a mix of JavaScript and CSS in your design system. Styled- Components use tagged template literals and the power of CSS to style your components. It lets you write CSS code that is only available to that component and not to any other element on that page or component.
The example below shows two basic components, a wrapper, and a title, with some styles attached to it:
To change a styled-components template literal based on its props, you can pass a function to it. This button component can change its colour from its primary state. We change the background and text colour when we set the primary prop to true.
You’ll often need to use a variable by modifying it slightly for a specific use case. For example, you might pass in an interpolated function and modify them based on some props, but that’s too much effort for only one style override.
Simply wrap a new component in the styled() constructor to make it inherit the styling of the other. Here, we take the button from the previous section and make it exclusive by adding some colour-related styling:
You will get the following advantages with Styled-Components:
- Styled components create unique class names for your styles, and there are no class name bugs. There’s no need to be concerned with duplication, overlapping, or misspellings.
- Easy dynamic styling: without manually handling many classes, modifying the styling of a component based on its props or a global theme is intuitive and straightforward.
- Maintenance is easy: You’ll never have to dig through several files to find the styling that affects your component. So, maintenance would be a lot easier no matter how large your source code is.
- Automatic vendor prefixing: keep your CSS up to date and let styled-components take care of the rest.
The learning curve and the challenge of integrating with legacy CSS are two disadvantages of this approach. Since styled-components transforms all of your React component’s style definitions into plain CSS at build time and injects it into the <style> tags in the head of your index.html file, it impacts performance.
Build with independent components for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →
Conclusion
Developers often desire a cleaner CSS sheet with no unnecessary classes. So, we just have to think about the classes they’d like to see in the design system and nothing else. All the approaches we’ve discussed above can be used to arrange styles in a design system, as long as the design system focuses on the applications’ basic components rather than internal implementations.
The most important thing is choosing the best fit to style your design system, but not just the most popular approach.
Thank you for reading.
Learn more
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- The Composable Enterprise: A Guide
Building Design Systems: How to Treat CSS Styles was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Piumi Liyana Gunawardhana
Piumi Liyana Gunawardhana | Sciencx (2022-03-07T07:27:56+00:00) Building Design Systems: How to Treat CSS Styles. Retrieved from https://www.scien.cx/2022/03/07/building-design-systems-how-to-treat-css-styles/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.