这个css结构叫啥？

Posted 2023-02-22

【中文标题】这个css结构叫啥？

【英文标题】：What is this css structure called?这个css结构叫什么？

【发布时间】：2021-04-08 04:42:18

【问题描述】：

我正在与某人一起开发我的第一个 Web 开发项目，我负责前端部分。在我的个人项目中，我一直在使用纯 css，但在这个模板中，我看到他们正在使用其他东西，一种不同的结构，我想。我有点弄清楚它是如何工作的，但因为我以前从未接触过它，这让我很难发展。我想知道它是什么，以便我可以阅读一些文档并更好地理解它。 （例如：通常，当我使用className时，我将类名放在“”之间，但这里就像css.something）你能告诉我它是什么吗？我会在这里留下一个sn-p

.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)>

【参考方案1】：

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

link1

link2

【参考方案2】：

虽然我对 React 并不太熟悉，但这个 (className=css.menuItem) 是某种模型绑定，因此当 React 完成后，它会将 css.menuItem 的值绑定到渲染的 html 上，最终结果可能是像

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

【参考方案3】：

您在其中看到的 javascript 格式是一种视图绑定，或者我们可能将其描述为领域特定语言 (DSL)。它是某些框架（可能是 React 或其他前端框架）使用的 Javascript 来构建您在页面上看到的 HTML。我不能确定，因为我不知道我在看什么框架，但我敢打赌，如果你在浏览器中使用“检查”功能，你会在生成的 HTML 中看到这一点由该 Javascript 创建：

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

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

【讨论】：

这里是reactjs，不好意思，忘记说了。但是你为什么要这样使用 CSS 呢？不是无缘无故更复杂吗？

您会使用它，因为它更灵活。这个例子很简单，但是你可能有一个 Javascript 块，它根据一堆条件填充不同的类名。在简单的一端，它可能是在两个类之间选择的布尔条件语句，或者在更复杂的示例中，它可能是一个函数，它生成一个类名作为 Javascript 字符串，该字符串会根据许多因素而变化。我回答的关键词是“动态”。因为类是在 JS 中分配的，而不是硬编码的，所以它可以根据各种因素而改变。

【参考方案4】：

您是否查看过 css 对象包含的内容？

据我所知，@apply 将 css 部分置于预编译语言中，例如 SASS 或 SCSS。

你没有提到它是否是 ReactJS。如果是这样，那么您正在处理的任何内容很可能都在 JSS 中。

【讨论】：

问题被标记为 [reactjs]

是reactJS，不好意思，我没提

哎呀....有点忽略了这一点。把它放在标题中会更清楚。