Allow camelCase CSS class names

It’s been asked for before… however nothing ever came of it…

I am also looking for the ability to input class names EXACTLY as I type them and have the exported/generated code respect that.

Ideally when typing a class name, to flag the system that this is my intent, you could input it with backticks before it like ‘className so that it doesn’t generate the classname to be classname (all lowercase)

Example of what is typed vs what webflow should generate:
pgBg000 = pgbg000
‘pgBg000 = pgBg000

There would be a few exceptions to this such as if someone tried to force a class name using the tick marks that also started with a number (as class names can not begin with numbers, special characters, spaces etc etc)
000pgBg = _000pgbg
‘000pgBg = _000pgBg

I’m having a hang up with this right now trying to get webflow to generate class names with uppercase letters…

Is this still on anyone at webflow’s radar?

I really need support for webflow to allow uppercase letters in class names… (not automatically convert to lowercase)

I understand that it would be difficult for webflow to determine if the class name was meant to be named a certain way but I was thinking that another easy workaround would be to have settings on the project level that changed the way class names are generated, or like I said before, a way to hint to webflow when the classname is created that it shouldn’t autoformat the class name’s case.

Example:
Currently If I write a class name like:
Full Width
Webflow converts this to:
full-width

My suggestion to allow custom class naming so that webflow doesn’t automatically convert to lowercase is to start the classname with a backtick if you want webflow to not convert the case of the class to lowercase... So if I wrote:fullWidth
It would instead do all of the other things like replacing spaces with - hyphens, not allowing invalid characters like @ symbols, not allowing class names to begin with a number etc etc and instead just don’t convert to lowercase…
It would leave it at:
fullWidth (instead of converting it to fullwidth)

Other examples and how I would expect webflow to convert the class name:
If the Class name was input as:
`100 @Percent width
webflow would still convert this to:
_100-Percent-width
(This is just an example, I would never actually write such bad classnames)

This would allow us to work with other code libraries better without having to rely on custom code…

I know that it is best practice to have class names as lowercase, but we can’t control what other people think or what other opinions people have… here are just a few examples of classnames that are killing me because I can’t get webflow to work the way I need:

.pillBox
.regList
.faqList
.bulletList
.IE11
.mtSm
.pAbs
.pRel
.noWrap

There are about 1000 other classnames in the codebase I am working with and the developers say it would take way too much time for them to convert all their css and references in html to best practices.

Is there anyone else who has had this problem? it sounds like it has completely fallen off of webflow’s radar and is not going to be implemented any time soon… which is unfortunate because that will probably end up meaning I won’t be able to use webflow at my current job anymore…

Thanks for listening to my rant… I hope this gets some attention soon.

Thanks for the detailed feedback. I am moving your topic to Feedback as that is what it is and I think it will be more visible to the right people there.

1 Like

I have the same problem, when I want to work with external libraries for animations, swipers, or so. This is so annoying.