Treehouse: Grow your CSS skills. Land your dream job.

CSS naming convention

  • # August 4, 2012 at 7:30 am


    this bugs me lately.

    Write words together is not eradable but …

    JavaScript uses camel case = SomeThingHere
    SQL uses underscores = Some_Thing_Here
    CSS uses dashed for 95% for what I saw = Some-Thing-Here

    Would it be unusual to use underscores in .CSS as for naming classes and ids ?

    .slideshow {float: left;} ... (hard to read)
    .SlideShow {float: left;} ... (slightly better)
    .slide-show {float: left;} ... (more readable)

    .slide_show {float: left;} (seems to be the winner = readable and copy_able)

    I like the ability to copy / paste names when using underscore (not possible with dashed) but I feel weird about it after 5 years of using dashed in CSS.

    How do you write classes in .CSS ?

    # August 4, 2012 at 12:05 pm

    I don’t think it matters. I use the hyphen method, but who really cares? If you are used to underscores then don’t change now.

    Also, what do you mean by “not possible with dashed”? I can copy/paste dashes all the time.

    # August 4, 2012 at 12:18 pm

    NOT = not possible
    BUT = more difficult … is what I meant with those dashed

    .this-is-text { ... }
    .this_is_text { ... }

    they are impossible to copy with one click (dashes)
    try example above = to copy whole class

    this naming stuff came to me while working on one theme that had whole css like this
    even images used underscore signs

    and it is so faster to copy, paste, modify names this way (underscores)

    # August 4, 2012 at 1:29 pm

    Oh I see, when you double click… Well I guess I just learned to work around that.

    # August 4, 2012 at 5:15 pm

    @krysak4ever, I know this isn’t the answer you’re looking for, but to help in selection you’re probably aware you can click and drag to select; but you can also double click and drag to select – this will select complete words as you drag making the selection simpler than by character.

    /* wow that was a long run on sentence ;) */

    # August 4, 2012 at 6:08 pm

    sure I know

    it just bugged me because it is so convenient to double click or hit rename and all gets selected
    no more :)

    # August 4, 2012 at 8:34 pm

    @Krysak4ever If you are selecting text with your mouse, then you are probably going to be slower than using your keyboard no matter what method you use. I find it quicker to select text via my keyboard, avoiding moving my hand to the mouse if I can.

    I have generally used camelCase so that a simple SHIFT + OPTION + → selects the class within a single button combination, but have recently started using dashes as I am using more of a OOCSS approach now, and that allows me to easier copy select parts of classes. It also looks nicer as that is what CSS does, but that is just aesthetics.

    I do as much of my navigating throughout my code with my keyboard as possible. I highly recommend you learning to do the same, I think you will find it quicker too :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.