Style classes are a great resource for making sure your app looks and functions consistently. Not only do classes make it easy to apply the same styling to multiple elements, ensuring consistent styling throughout the entire app, but they allow you to make updates in one place that will be reflected across all elements. This saves time and effort, since you don't have to manually update each element separately.

Classes can also help keep your code organized, since all related styles can be grouped together in a single class. This makes it easier to find and edit existing styles or add new ones if needed. Another benefit of using classes is that they are completely reusable, meaning if you want to use the same style in other apps or projects, you can simply copy and paste it over.

For a visual walkthrough of classes and styles management in Codux, check out the video below.

It's easy to apply, remove, and change styles of elements with classes! Codux shows which style classes are styling an element, and lets you apply and create other styles from within the panel.

If you've created a new project in Codux using any of our template projects, you'll be able to see which classes are stored in which style files right from the panel:

If you create a new class in an existing project that does not yet have a style file to save it to, Codux will offer to create the style file for you, named according to the component file name, and with an extension that matches the styling solution for the project. Make sure to set the styling solution key in codux.config.json so Codux knows which styling solution you're using.

Note! If you like to use the JavaScript utility classnames, great news! When configured in package.json and codux.config.json, you'll see throughout Codux class names that were joined together by the classnames library. Codux then also uses the library to write new classes that you create to code.