css - 这种 CSS 技术有名字吗？

Question

我已经使用这种技术一年多了，但我还没有在其他地方看到它的使用。简而言之，我使用 CSS 类来形式化显示“状态”或“模式”。我尝试过搜索“css 模式”、“css 状态”、“有状态 css”等，但如果它存在，那么它不会使用任何这些名称。

这是我正在做的事情的一个简单示例。该示例是响应式文本输入，这种输入会与服务器对话并动态地告诉您您选择的用户名是否已被使用。

标记:

<div id="username-container" class="username-mode-ready">
    <!-- input -->
    <label for="username" class="username-label">Username:</label>
    <input type="text" id="username" class="username-input" />

    <!-- icons -->
    <img src="error.png" class="icon error"/>
    <img src="ok.png" class="icon accepted"/>
    <img src="loading.gif" class="icon loading"/>

    <!-- messages -->
    <p class="message error">
        That username is not available.
    </p>
    <p class="message accepted">
        That username is available!
    </p>
    <p class="message loading">
        Loading ...
    </p>
</div>

CSS:

/* Default = hidden */
#username-container .error,
#username-container .accepted,
#username-container .loading {
    display : none;
}

/* Show when appropriate */
#username-container.username-mode-error    .error,
#username-container.username-mode-accepted .accepted,
#username-container.username-mode-loading  .loading {
    display : block;
}

现在我们将添加 Javascript。当我们访问服务器时，我们将执行以下操作:

$('username-container').className = 'username-mode-loading';

当我们返回时，我们将根据服务器响应执行以下操作之一:

$('username-container').className = 'username-mode-accepted'; // Username available
$('username-container').className = 'username-mode-error';    // Username taken

这样，我们只需更改容器的 className 即可看到不同的显示模式，而不需要对一百万个不同的元素操作 element.style.display。我们还可以做的不仅仅是显示/隐藏:

CSS:

/* Set label color to green or red depending on availability */
#username-container.username-mode-accepted .username-label {
    color : green;
}
#username-container.username-mode-error .username-label {
    color : red;
}

或者跨多种模式应用样式:

标记:

<img alt="Whew! I searched as hard as I could!" src="done-searching.png" class="icon done-searching"/>

CSS:

/* New icon should display in accepted and error modes */
#username-container .done-searching {
    display : none;
}
#username-container.username-mode-accepted .done-searching,
#username-container.username-mode-error    .done-searching {
    display : block;

该技术是否已经被描述过？我即将开始将其称为面向模式的 CSS，因为当我向人们解释它时需要一个名称，但我宁愿使用漂亮的、真实的、可在 Google 上搜索的名称(如果有的话)。

Answer 1

查看这些涵盖其中一些想法的文章:

• http://snook.ca/archives/html_and_css/prefixed-classes-bootstrap
• http://snook.ca/archives/html_and_css/naming-convention-in-css
• http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
• http://speakerdeck.com/u/andyhume/p/css-for-grown-ups-maturing-best-practises

简短回答:我不知道;-)