Classes

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 multiple elements. This saves time and effort, since you don't have to manually update each element separately. Codux automatically creates classes and selectors for elements that don't have them when styling elements in the Styles panel.
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.

Applying and Removing Classes 

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 to, Codux will offer to create one for you, named according to the component file name. Its file extension will 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.

A note on naming 

In Codux, class names must adhere to specific character restrictions to ensure compatibility and avoid potential bugs. The following guidelines apply:
  • Valid Characters: Class names can include letters, digits, dashes (-), and underscores (_). These characters are safe to use in both CSS and JSX contexts. For example, if you name your class root, you would use classes.root in JavaScript. Similarly, my-class_123 is a valid class name.
  • Invalid Characters: Spaces are not allowed in class names. Any other characters, although technically valid, are restricted to prevent issues with other tools and to maintain clean, understandable code. For example, do not use: radio.button, header 5, dialog:error.
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.
To rename a class, hover over its name and choose Rename from the available options.
You'll find that renaming class names is not allowed when:
  • The class is defined in a plain CSS/SCSS file rather than a module.
  • The class is third-party (defined in node_modules).
  • The class or the CSS rule is generated dynamically using JavaScript.
  • The class is an expression.
  • The class is not imported directly from a CSS/SASS module.
  • The name of the CSS file in which the class is defined doesn't match the name of the component or board file.
  • The class is re-exported from another CSS/SASS module.
Codux allows renaming class names when:
  • The CSS/SASS file where the class is defined is a module file.
  • The class is defined in that module and imported directly from that module.
  • The name of the module matches the name of the component or board file where it's used.
IN THIS ARTICLE
Next article