- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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.