这个css结构叫什么

Question

我正在和某人一起进行我的第一个web开发项目，我负责前端部分。在我的个人项目中，我一直在使用纯css，但在这个模板中，我看到他们使用了其他东西，我认为是一种不同的结构。我有点弄清楚它是如何工作的，但因为我以前从未与它有过交集，这让我很难开发。我想知道它是什么，这样我就可以阅读一些文档，更好地理解它。(举个例子：通常，当我使用className时，我会把类名放在"&quot之间，但这里就像css一样。something(你能告诉我它是什么吗？我会在这里留下一个片段

.menuItem {
@apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}

<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>

Answer 1

这是CSS Modules，您可以在以下两个链接中阅读更多关于CSS用法的信息：

• link1

• 链接2

Answer 2

虽然我对React不太熟悉，但这(className={css.menuItem}(是某种模型绑定，因此当React完成它的任务时，它会将css.menuItem的值绑定到渲染的HTML上，最终可能会出现类似的结果

<button className=".menuItem" ...>

Answer 3

您看到的Javascript格式有一个视图绑定，或者我们可以将其描述为领域特定语言(DSL(。它是一些框架(可能是React或另一个前端框架(用来构建您在页面上看到的HTML的Javascript。我不能确定，因为我不知道我在看什么框架，但我敢打赌，如果你使用"；"检查"；功能，您将在该Javascript创建的HTML中看到这一点：

<button class="menuItem" onClick="[...]">

如果您希望使用纯HTML，那么这种格式对您来说应该很熟悉。您链接到的那个Javascript只是动态地构建这个HTML。在您提供的示例中，大括号({ }(只是Javascript库的一个指示符，它需要用一些东西来填充占位符，在本例中是css.menuItem，它转换为呈现为css类标记(class="menuItem"(的类名menuItem。

Answer 4

您研究过css对象包含什么吗？

从我所看到的，@apply将css部分放在像SASS或SCSS这样的预编译语言中。

你没有提到它是否是ReactJS。如果是这样，那么无论你在处理什么，都很有可能在JSS中。