Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS naming conventions?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #40290
    Vinnix
    Member

    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!

    #111834
    TheDoc
    Member

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

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

    #111835
    Vinnix
    Member

    so all lower case?

    #111836
    TheDoc
    Member

    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.

    #111837
    Senff
    Participant

    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.

    #111838
    Vinnix
    Member

    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!

    #111842

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

    The whole thing is well worth the read.

    #111843
    TheDoc
    Member

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

    #111845

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

    #111846
    TheDoc
    Member

    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.

    #111850

    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.

    #285969
    dandv
    Participant

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

    <img class="ProfileAvatar-image">

    #285970
    uxfed
    Participant

    And yet Twitter Bootstrap doesn’t. Go figure.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘CSS naming conventions?’ is closed to new replies.