HTML codestyle proposal: conventions for ids and classes

Development
#1

Good afternoon!
Together with @MichaelHamann we found out a small gap in the definitiion of our HTML codestyle. We could not find a practice regarding conventions used for IDs and classes in HTML. To see an example where such a gap could let our code quality decrease, see this PR. As far as I know, we already have an unspoken convention. I think this is something we should write down in the codestyle to ensure more consistency in our codebase and a better quality on the long term:

###Start of the proposal###
Section HTML codestyle →

  • Use kebab-case for values in the class of nodes
  • Use camelCase for id values of nodes

###End of the proposal###
Here are links towards examples of the id and class attribute values in the codebase as of today:

Do you agree with this proposal? Should we also add a convention for another attribute I forgot to take into consideration here? Is there another place in the doc that we should update to highlight this codestyle?

Thank you for your interest in this proposal,
Lucas C.

#2

+1, that’s the style I’m currently using.

Thanks,
Marius

#3

Thanks for opening this proposal: tbh I’m always struggling on this and I’m really not consistent so it’s good if we can have a documented convention…

I’m +0 for this style, I’m just curious why not using same style for classes and ID? Is there another argument than the fact right now we’re already relying a lot on this style and changing it now would need to fix lots of places?

#4

I don’t have additional arguments.

An alternative I thought of would be to go full kebab-case, but this would need more fixes.
A pro of the convention used now is that it’s easy to differentiate classes from IDs when writing/reading CSS for XWiki. A con is that it’s less consistent than using the same convention everywhere.

IMO none of these differences are meaningful enough to spend time updating the codebase for a new convention.

Side note: right now, the situation is pretty settled with kebab-case in classes, but it’s way more chaotic for ids: cameCase is the most common, but there’s plenty of other convention uses that would need to get fixed over time.

Thanks for your feedback :slight_smile:
Lucas C.

1 Like
#5

I’ve just tried to see if there any commonly accepted style guides. What I’ve found is that MDN says kebab-case. Google’s style guide also says kebab-case and has an interesting argument for always including a hyphen in an id: it prevents exposing these elements as global JavaScript variable.

Taking these arguments into account, I’m +1 for kebab-case for class names and I’m wondering if we shouldn’t do the same for id values. So -0 from my side for camelCase for ids.

#6

I’m +1 for kebab-case everywhere.
-0 for camelCase on ids.
+1 to only apply the rule on new code, as changing ids and classes on existing code could potentially break extensions.

#7

Hmmm that calls for another discussion if we should consider those as APIs in the future… Now if we don’t apply the rule everywhere it also means we cannot have an automatic check for it probably.

1 Like
#8

Another argument is Attribute selectors - CSS: Cascading Style Sheets | MDN which allows you to apply the same styles to all elements matching a CSS class like foo-* with [class|="foo"].

I’m also fine to use kebab-case for both IDs and classes.

Thanks,
Marius

1 Like
#9

Considering the discussion we had here, It seems that camelCase for ID accumulates -0 that kebab-case for ID does not have. Therefore, I added the following to our codestyle:

  • Use kebab-case for values of the class and id attributes

Thank you everyone for sharing your views on the matter :slight_smile:
Lucas C.