3 ms·
> We use hyphen delimited, > lowercase selectors: .thisIsBad{}, > .this_is_also_bad{} but .this-is-correct{}. . I am a fan of mixing Camel Case and Dash Sep
by csmeder 15y ago
> We use hyphen delimited,
> lowercase selectors: .thisIsBad{},
> .this_is_also_bad{} but .this-is-correct{}.
.
I am a fan of mixing Camel Case and Dash Separated. I use Camel case for specific elements.
eg. ".addClientButton"
However, I use a mix of Camel Case and Dash Separated for IDs specifying a specific element in a specific part of the dom.
eg. "#newClientPanel-addClientButton"
.
I learned this method from looking at how apple.com does their styles on their check out screen. However, it doesn't look like they don't do it this way any more.
How do you handle making unique IDs? I guess I could switch to something like
.add-client-button and #new-client-panel_add-client-button
- indubitably 15y agoI don’t like .this-is-correct{} because sometimes you have the same variable name in Javascript too, where dashes won’t work.
- intranation 15y agoDashes map more cleanly to existing CSS syntax, eg nth-child, background-color, etc. Much like camelCase looks more like Javascript than my_variable.
- harisenbon 15y agoI do something similar, where I use hyphens to delineate ideas and sub ideas (table-striped) but use camelCase when one of the class parts contains multiple words. (form-addUser) This also plays well with my IDE which splits word selection on a hyphen, so if i want to change form-addUser to form-removeMonkey, it's just a single selection, where as if it was form-add-user, I would have to actually drag to select the text.