css-dom_CSS`do- *`

css-dom

For years we've used CSS classes as not only stylistic functionality but also as signifiers or "triggers" for JavaScript functionality.  For example, Mozilla uses a #tabzilla element (coupled with a JavaScript file that looks for it) to inject the Tabzilla widget.  Using #tabzilla is nice, and even though it's an ID, it isn't necessarily descriptive.

多年来，我们不仅将CSS类用作样式功能，而且还用作JavaScript功能的指示符或“触发”。 例如，Mozilla使用#tabzilla元素(结合查找它JavaScript文件)来注入Tabzilla小部件。 使用#tabzilla很不错，即使它是一个ID，也不一定具有描述性。

Now cut to cases where there isn't an ID, and you're triggering JavaScript functionality solely based on a CSS class.  You could add a CSS class signifier like highlight-me or login, but when you try to maintain the HTML, those classes area relative mystery.  What I propose is a system by which we add a do- prefix to any CSS class that is implemented solely for the sake of JavaScript functionality.  A few examples:

现在切入没有ID的情况，而您仅基于CSS类触发JavaScript功能。 您可以添加一个CSS类指示符，例如highlight-me或login ，但是当您尝试维护HTML时，这些类则相对神秘。 我提议的是一个系统，通过该系统，我们可以向仅出于JavaScript功能实现CSS类添加do-前缀。 一些例子：

<div class="do-launch-login">...</div>

<a class="do-close-modal">...</a>

<input class="do-autocomplete" />

So I'm not proposing anything groundbreaking and hopefully you already have a system in place, but if you don't, you should consider a do- or likewise system.  The days of using generic CSS classes are over and a class prefix like this will help you quickly identify if a class is relevant to styling or simply implemented for the case of identifying elements for JavaScript functionality.

所以我不建议任何开创性的，希望你已经有了一个系统的地方，但如果你不这样做，你应该考虑do-或类似的系统。 使用通用CSS类的时代已经过去，像这样的类前缀将帮助您快速识别类是否与样式相关或在识别JavaScript功能元素的情况下是否简单实施。

Again, this probably seems like a simple idea and exercise but it's an important practice.  If you open a HTML template, look at an element, and have no idea if it's used for JavaScript or not, you're possibly in for a world of hurt.  And the word "possibly" should be scare the hell out of you.

同样，这似乎是一个简单的想法和练习，但这是重要的实践。 如果打开HTML模板，查看一个元素，却不知道它是否用于JavaScript，那么您可能会遭受很多伤害。 “可能”这个词应该吓到你了。

The prefix isn't important as long as you keep one.  As long as you keep a className that you can immediately identify as JavaScript-only, you'll be in good shape!

只要保留一个前缀，前缀就不重要。 只要保留一个可以立即标识为仅JavaScript的className，您的状态就会很好！

翻译自: https://davidwalsh.name/css-do

css-dom