I assume の is a Japanese character.
Kanitkorn Sujautra

Thank you for your response. I only use の (and several others, such as 川) on my personal projects, and I have set up hot keys in my text editor to type some of these kanjis without having to switch layouts.

You are right that it may be harder for my colleagues to type these characters, so at work, I simply used the standard BEM delimiter: MusicPlayerUI__currentSong.

More accurately, we are still using kebab-case (because it’s been written this way when I joined), so it looks more like music-player-ui__current-song.

As for modifiers, I personally use ‘is’ to prefix a modifier. This is because the modifier has to be used in conjunction with another element, so both the block name and element name becomes unnecessary.

It looks like this:

  render () {
let className = classNames('MusicPlayerUI', {
isPlaying: !!this.props.playing
return (
<div className={className}>

And in CSS, I do this:

.MusicPlayerUI.isPlaying {
/* ... */

At work, we used double-dash as a prefix. It looks cool and looks like a unix command-line option. I like it a lot:

    let className = classNames('MusicPlayerUI', {
'--playing': !!this.props.playing

But a CSS identifier may not start with a hyphen, so we need to escape the first hyphen:

.MusicPlayerUI.\--playing {
/* ... */

Since we use Stylus, we need to escape the backslash (which would escape the dash) with another backslash (which escapes the backslash itself):

// ...

In the end, I think it does not matter which style we choose, as long as we remain consistent. :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.