Styles are not applied if the class consists of numbers

If you make the class name slate, the styles don’t work. I tried it on paragraph, header and div. If you change the class name to numbers, the styles are not applied.

I realise that’s not the way to name classes, but I’ve been testing the difference between global styles, classes and different variations. To speed up the work I called classes by numbers and nothing worked.

I was very surprised when I found out why)))

wordpress 6.4.1.
cwicly 1.3.3.1
CleanShot 2023-11-12 at 17.21.48

Hey @DenisKozeev.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Hope that helps.

Thank you for the information. I think it would be more correct to inform you that you can’t write such a class :thinking:

Can’t agree, as this is related to general CSS syntax, nothing exclusively specific to Cwicly.

Yes, but if cwicly presents itself as a no code tool, then it’s as if the basics of CSS can be ignored by many. I don’t insist that my decision is the right one, just thinking from the point of view of an average WP user.

Well, then one could argue why even touching a class name then…

Since there are hundreds of general things and rules to consider, how would that make any sense?
Even if this specific case is present in the documentation, the one user out of thousand who run into this wouldn’t read it.
A quick Google search or forum post will clear things up in a more efficient way than cover dozens and dozens of potential scenarios in the docs.
But that’s only my opinion.

it’s just bad UX when you do the same things and they work differently. There is no notification or disallowance.

If you write code in the editor, the syntax is highlighted. For example, if you start typing text into the numbers field in figma, the field will just replace that with numbers. You’re not given any information, but I realise that’s not the way to do it.

Then they give me the numbers, and I can change other values (colour, indentation, etc) but nothing changes. I spent 20 minutes trying to understand what happened)))

Yes, maybe it’s not a common occurrence and it’s probably not a major issue that needs to be addressed urgently, but I think it’s worth paying attention to.

ps Checked in webflow, there if you specify a class with numbers, they add “_” before the numbers in the code, in the editor it’s just numbers and it’s not visible in any way.

I agree with @Marius regarding this.

I also agree that purely as a helpful point for less experienced users, Cwicly could have some validation on the field. Cwicly is so helpful in so many ways, this is just another nice way to add value.

Thanks for elaborating, definitely something to consider. You indeed have a point here.
Direct interface feedback when typing in invalid values is a quite decent idea.
I’m positive about a potential implementation in one way or another in that regard.

Thanks for bringing this up and being persistent :+1:
Turning this topic into a Feedback thread would make sense imo.

Personally I prefer if the tool didn’t fix my syntax behind the scenes.

Obviously it would be very helpful if some kind of warning would appear when typing with invalid syntax but I can understand why that’s not always possible.

As a non front end developer, the thing I absolutely love about Cwicly (and its community) is that it allows me to easily create beautiful designs while learning HTML, CSS, and web standards in the process. I can then apply what I learn with Cwicly elsewhere.

1 Like

Hi @DenisKozeev,

Thank you for bringing this up.
And thank you @Marius, @StrangeTech and @nadim for your views and input on this.

Following the general consensus, we’ll be sure to add a notice to avoid any confusion for the user.

Moving to planned Feature Requests for the team to keep track of.

Once again, thank you to everyone who participated in this discussion!

Now, in 1.3.4, typing in an invalid class name will bring up a notice to avoid any confusion:

Please don’t hesitate to share your feedback on this.

1 Like