codelord.net

Code, Angular, iOS and more by Aviv Ben-Yosef

CSS Tip: Differentiate Classes Used in Scripts

| Comments

This one is short but so good that I find myself having to reintroduce it in every project I work on and to most developers I work with.

We all know that though CSS is for styling, sometimes we have to use a class to get to an element from JavaScript, e.g. $('.save-button').

The Right Way™ to do this is by prefixing those classes with js- to differentiate them from “real” classes. Note that this does mean I sometimes will have an element with 2 classes, e.g. save-button and js-save-button.

Why?

  • Never fear removing a CSS classes because it might break some script that’s using it
  • Never fear renaming or moving a class when you change scripts because it might break the styles

Happy coding!

Comments