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，因为当我向人们解释它时需要一个名字，但如果有的话，我宁愿使用漂亮的真实的Googlable名称。

Answer 1

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

简答：我不知道; - ）

这种CSS技术有名字吗？

1 个答案: