Sign upSign InSign upSign InLakindu HewawasamFollowBits and Pieces--ListenShareA while ago, I wrote an article about building modern applications using independent Components. At that time, my sole focus was on how developers could develop isolated components with React to build software comprising extremely shareable and reusable components.This got me thinking. Why are we limiting components only to a backend service or a frontend template?So, with that in mind, I started investigating deeper into Bit and very quickly understood that Bit isn’t language dependent. You can use Bit to build components in any language as long as you create a runtime for the component by defining its environment. This immensely improves the power of application development as anything could be built as an independent component designed, developed, tested, and versioned in an isolated ecosystem.👉 For instance, check out the React component development environment:bit.devAnd I thought to myself — “What if we create components out of CSS code?”This idea was compelling. CSS is something that every developer would use in their career regardless of the framework that they are working on. Converting your CSS code into its own independent set of components can promote reusability and consistency in your design system and UI library.👉 Also, check out this guide to see how you can leverage Bit to easily build and implement a composable design system:blog.bitsrc.ioLet’s focus on building three SCSS components with Bit:These SCSS components compose the blocks/container component, which defines a container with a background color, padding, and media queries for different screen sizes.Before moving forward, you’ll need to install the Bit CLI using the command:Next, you’ll need to verify that the CLI has been installed successfully by running the command:If you’ve installed Bit correctly, you should see the screenshot below.Finally, you’ll need a Bit account to share your SCSS components. Therefore, create an account with this link.Next, you’ll have to create a Bit workspace to help build SCSS components that we can reuse across our projects!To do so, run the command:Be sure to replace my-org with your Bit username and my-scope with your scope name. If you're unfamiliar, a scope is a collaboration server that lets your team store and collaborate with components in the cloud.After you’ve created your workspace, run the command bit start to launch the development server. You should see the output below if you've done this step correctly.Let’s create an SCSS component titled variables/colors. This component will define the color schemes for consistent color usage across your applications. Hence, you can create the component using the command:Next, we can start implementing the colors component. Its implementation is very straightforward. We define two primary and secondary variables and export them as a map:/* @filename: _colors.module.Like other Bit components, SCSS components too have their own entry file that lets you expose the component's API. Therefore, ensure to export the colors in the entry file so that it’s consumable by its consumers:Next, let’s create the layout/spacing component that includes a function for calculating spacing and our base spacing variable. To so do, execute the command:Navigate to its component code and open the _spacing.module.scss and include the code:In the snippet depicted above, a base spacing variable and a spacing function are defined that multiplies the base spacing by a given multiplier.Next, the base spacing variable and the spacing function are exported.Hereafter, we can create our final component — a layout/breakpoints component that defines different screen sizes and includes a series of mixins for other media queries. This can be done using the command:Next, navigate to its declaration file — _breakpoints.module.scss and include the code below to implement its functionality.The snippet above defines different screen sizes through the defined breakpoints. This is very powerful because these are stuff that generally every developer has to implement from scratch. But if they have reusable breakpoints components like the one we’re building right now, all they’d have to do is install the component on their application and use it.Now, we’re going to build a custom container component that will ultimately consume the SCSS components we defined in the previous steps. This will help improve reusability as developers that need such features will only need to use the custom container component without having to import and use the entire design system.To do so, first, you’ll have to create the custom container. This can be done using:Next, locate its declaration file — _container.module.scss and include the snippet shown below.As shown above, this will use the custom components we built earlier. Additionally, update the imports to reflect your Bit username and scope name.Bit maintains the independence of each component while keeping track of the dependencies between them. This allows us to combine these components to create more complex structures while maintaining modularity.👉 Learn more about managing dependencies.Since we’re working in a custom React Environment, we can freely create a simple React component to test the reusable SCSS components we’ve built in the steps depicted above. To create the component, execute the command:Next, open the component declaration file — react.tsx and include the code below to ensure you're reusing the SCSS components you've built.As depicted above, we first import the container from the container.module.scss file. Next, we assign the imported styles object to our component's div. This applies the styles defined in the container class to our React component.Finally, run bit start to view all your work in action!As we’ve discussed, you can manage incremental builds followed by automatic tagging, all in one place, with Bit. This is a key capability that allows Bit to maintain consistency and modularity across multiple projects and frameworks.Consider a scenario where we make an update to the spacing style. As soon as we tag this change, Bit is smart enough to recognize that any component dependent on this spacing style, like our container, must also be rebuilt and versioned.This cascading effect extends to the framework-specific components that utilize the container style. This means that if we have a React, Angular, or Vue component using the container style, Bit will automatically rebuild, retest, and version these components. Run bit tag to immediately snap a new version for the component based on the dependency hierarchy. This ensures that all dependent components are kept up-to-date with the latest changes, maintaining consistency across all projects and frameworks. It also allows teams to work independently, knowing that their components will remain in sync with any updates to the shared styles.Finally, you can run bit export to ship your components to the remote cloud where anyone could use your components or contribute to it.By incorporating Bit into your development workflow, you invest in a more efficient, consistent, and manageable codebase. Whether you’re building a complex design system or a small UI library, Bit’s reusable CSS components will undoubtedly be a valuable asset.If you found this article interesting to your development workflow, look at the complete code we worked on in my Bit Cloud.Thank you for reading.Bit is an open-source toolchain for the development of composable software.With Bit, you can develop any piece of software — a modern web app, a UI component, a backend service or a CLI script — as an independent, reusable and composable unit of software. Share any component across your applications to make it easier to collaborate and faster to build.Join the 100,000+ developers building composable software together.Get started with these tutorials:bit.devbit.devblog.bitsrc.iobit.devblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.io----Bits and PiecesSenior Software Engineer @ Enlear | 2x AWS Community Builder — ServerlessLakindu HewawasaminBits and Pieces--Osusara KammalawattainBits and Pieces--1Robert Maier-SilldorffinBits and Pieces--2Lakindu HewawasaminBits and Pieces--3UX Movement--6Uri Kutner--2Christine VallaureinUX Collective--53Mohammad Yaser Ahmadi--4Love SharmainByteByteGo System Design Alliance--54Pooja Daredi--HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams