CSS naming conventions?

[Vinnix]

I was wondering whats the preference in class and id naming in css? camelCase and/or PascalCase? do you think ID’s should be capitalized and classes be lower?

Sorry this might be a vague question.

Thanks!

[TheDoc]

I think the *majority* of front end developers prefer to use dashes, like this:

– `social-icons`
– `something-else`

[Vinnix]

so all lower case?

[TheDoc]

Yup.

I don’t think I’ve *ever* seen PascalCase. There are a few in the minority that use camelCase, but I save that for JS, not CSS.

[Senff]

I’ve used PascalCase in the past, and camelCase too. However, now I just use dashes, it’s just more clear.

It comes down to preference and personal style (or team) style. Another question you might ask is how you would name buttons or other specific elements. Some do btnSumbit, others do submit-button, and then some do btnSbmt.

In essence, it comes down what you prefer or what the team members agree upon.

[Vinnix]

hmmm, decisions decisions ;-)

I kind of catch myself being autistic with how i label my classes and id’s; I’m all over the place. I figured it would be pretty open to what namingConventions should be.

I try to go more OOP with my CSS (SCSS is easier for it) and name the items pretty general

I wonder if a general consensus needs to be noted for something like this ?

Thanks for your feedback!

[joshuanhibbert]

I would recommend having a read of this: https://github.com/csswizardry/CSS-Guidelines#naming-conventions

The whole thing is well worth the read.

[TheDoc]

Hmmmm. That was interesting, but I’m not sure I particularly agree with it.

[joshuanhibbert]

I’d be interested in hearing your thoughts, Gray. If you had time to elaborate?

[TheDoc]

The double-dash and double-underscore seem a little overkill to me. I don’t think it adds simplification, in fact I think it simply increases the risk of confusion.

For the most part, I feel like it’s overkill. Adding solutions for problems that don’t particularly exist for the majority of dev teams.

[joshuanhibbert]

It’s not something that I have personally used, so I can’t talk from experience, but it sounds interesting. That being said, I’ve never worked in any teams with more than three people, or on any projects as large as that, so there has never really been a need for that level of abstraction.

[dandv]

Twitter uses PascalCase. Go to a twitter profile and see code like

<img class="ProfileAvatar-image">

[uxfed]

And yet Twitter Bootstrap doesn’t. Go figure.

[Author]

Posts