Forums

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

Home › Forums › CSS › CSS Class naming.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 15, 2016 at 3:09 pm #243645
    lonetraceur
    Participant

    Hi,

    I’m currently working on a personal project and am incorporating Atomic design, SASS and using the BEM style of creating CSS Blocks/Elements/Modifiers.
    However, is there any particular standard conventions for naming your actual classes?

    For instance, I’ve read that having a prefix on all of your class names is a good idea because you can instantly recognise your classes mixed with other libraries, etc…

    I’ve thought about incorporating something along the lines of:

    [prefix]-[relevantword][optional digits | optional letter]-[variation]

    So, as an example, one of my block names would become:

    rk-buttonA-lighter

    Which would reference my classes (rk), button style A, but the lighter version of it.

    Also SASS Variables could follow the same convention.
    rk-fontfamily
    rk-fontW
    rk-grey70
    etc…

    Does anyone have any other suggestions for actual naming conventions / guidelines of the class names themselves?

    July 17, 2016 at 7:21 pm #243657
    josh
    Participant

    Well you could use the BEM syntax prefixed with your identifier:

    .[prefix]-[block]
.[prefix]-[block]--[modifier]
.[prefix]-[block]__[element]

    I wouldn’t recommend using random digits/letters as they carry no meaning. Try and have each part of your class names carry some meaning so that they’re easier to work with in the long run. It’s also good practise for working in teams.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.