js- prefix for class names

[christiannaths]

I just wanted to draw your attention to this line in the CSS guide:

Never reference js- prefixed class names from CSS files. js- are used exclusively from JS files.

from: https://github.com/nait-dmit/styleguides/blob/master/css/overview.md#class-naming-conventions

Is this something that is currently being used by anyone when classing elements exclusively to provide a hook for JS? It seems like a good idea, not something I've used in the past though. I'll likely adopt this going forward if it's something we want to add.

/cc @nathanhumphrey

[nathanhumphrey]

Hmm, I'm not currently using that convention. For the most part, we're targeting selectors that are already present for presentation/css. I do think it's a good idea though, there are times when a class could be added specifically for JS targeting.

I'm not sure how I feel about the convention for is- prefixing... seems like it would be a little tougher to implement in our classes, but something worth considering as well.

[christiannaths]

Yeah, these are both new to me. I am currently working on a single-page app with a stateful panel/view system, so the is- prefix makes sense to me at first glance (although I haven't had a chance to put the concept into play yet). I sort of envision selectors like: .contextual-nav.is-focused {...}, and then encapsulating the rules unique to that particular state in that CSS block.

I believe it was derived from SMACSS: http://smacss.com/book/type-state

Though I have to admit, even being a fan of OOCSS, some of those class names in the article feel overly-presentational. At the moment I could go either way on this...

Bringing the pieces together, my first thought is that it would look something like this?

<!-- HTML -->
<a class="js-toggle-modal">Toggle</a>
<div class="js-modal is-hidden">Hello World!</div>

/* CSS */
.is-hidden {
  display: none;
}

.is-active {
  display: block;
}

// Javascript
$(".js-toggle-modal").on("click", function(e){
  $(".js-modal").toggleClass("is-active");
});

The concept of completely decoupling the JS behaviour from the actual visual state is pretty appealing to me. That is something I've been doing for a while, I just haven't been expressing it in my class names.

[nathanhumphrey]

That looks really good. I'll update some of my JS2 content and see how it plays out in class. My initial thoughts (based on what you've shown here) are that we should probably go ahead and adopt this.

Having this documented in the style guide will be great for the cross-referencing we'll have to do between classes. This is IMHO proving to be a very worthwhile endeavour.

[christiannaths]

:+1:

[christiannaths]

Just wanted to leave an update on this one. I've put both the js- and the is- prefixes into practice on three or four different projects since this time last year and I've really enjoyed working this way. I'm going to fully endorse this as part of our best practices going forward. I'll close this for now, any objections, feel free to re-open and comment.

cc/ @nathanhumphrey @dagilleland @mdayGitHub @CreepyPhil @swunait