Best practice for CSS class naming for use with jQuery selectors

前端未结

关注

 6  2087

北恋 2020-12-28 15:55

While building a Javascript-heavy web application, what is the best practice for naming CSS classes to keep the Javascript code and CSS stylesheets clean and the UI structur

6条回答

一个人的身影 (楼主)

2020-12-28 16:46
The cleanest solution would be to decouple everything: HTML - CSS - JS.

To do that, you would use your first approach (the individual naming allows the CSS-classes to be applied to any HTML-element) but additionally you add specially named classes for JS. Like this you don't have to be afraid to break your JS if they remove a CSS class and vice versa.

A good read about how to best implement such a naming convention: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
```
// HTML

  
  
```



// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript 
$(".js-list-delete").show();
$(".js-item-delete").hide();

Best practice for CSS class naming for use with jQuery selectors

Item 1