In Webflow, how do I correctly write the classes and combo classes when using them in custom code? Is it important to use capital letters in the code if the classes or combo classes start with a capital letter?

Published on
September 22, 2023

When using custom code in Webflow, it is important to correctly write the classes and combo classes to ensure proper functionality and styling. Here are some guidelines to follow:

  1. Use lowercase: It is generally recommended to use lowercase letters when writing classes and combo classes in your custom code. This is because Webflow automatically converts class names to lowercase in the exported HTML, and using uppercase letters can lead to inconsistencies and errors.

  2. Replace spaces with hyphens: When using multiple words in a class or combo class name, it is good practice to join them with hyphens instead of spaces. For example, if you have a class called "main container", you would write it as "main-container" in your custom code.

  3. Avoid special characters: While Webflow allows you to use certain special characters in class names, it is best to avoid them in your custom code. Stick to alphanumeric characters and hyphens to ensure better compatibility and reduce the chances of errors.

  4. Don't start with a number: Class and combo class names should not start with a number. If you need to include a number in the name, make sure it comes after a letter or a hyphen.

In terms of capital letters, it is generally not recommended to start class or combo class names with a capital letter in your custom code. While it may work in some cases, it can lead to inconsistencies and errors due to the lowercase conversion that Webflow performs.

It is best to stick to lowercase letters when writing class and combo class names in your custom code to ensure proper functionality and compatibility. Following these best practices will make it easier to manage and maintain your code in Webflow.

Additional Questions:

  1. How do I add custom code to my Webflow project?
  2. Can I use JavaScript with Webflow?
  3. What are some best practices for writing efficient CSS code in Webflow?