Question

我一直在努力编写更好的CSS，我已经看过一些Harry Roberts会议并阅读了关于BEM方法的内容。所以我现在理解的是：

你应该保持模块化和可重用的东西
制作自定义常规课程并避免嵌套
永远不要使用ID（或几乎从不）

我的问题涉及第二个问题：如果是列表，请说我想编辑普通状态和:hover状态的颜色。我应该为每个<li>元素或<ul>的自定义类添加自定义类，并参考其中的<li>吗？

这是一个更好地说明我的意思的例子。

＆＃13;

<h3>Custom class for ul</h3>
<ul class="list">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</ul>


<h3>Custom class for li</h3>
<ul>
	<li class="list__element">One</li>
	<li class="list__element">Two</li>
	<li class="list__element">Three</li>
	<li class="list__element">Four</li>
</ul>

<style type="text/css">
	.list li {
		color: black;
	}
	.list li:hover {
		color: red;
	}

	.list__element {
		color: black;
	}
	.list__element:hover {
		color: red;
	}
</style>

＆＃13;

Answer 1

当您使用BEM时，请尝试将类应用于每个元素。这样你就可以全面处理同一级别的特异性，而且你不必处理优先级订单。

所以要回答你的问题，有.list__element：悬停正是你想要的。

我提供了一个更详细的例子来展示模块化。请注意我是如何添加一个新模块＆＃34;器具＆＃34;。

希望这能回答你的问题！

＆＃13;

.kitchen {
  &__utensils {
  }
}

.utensils {
  &__utensil {
    &:hover {
    }
  }
}

// this gets compiled to

.kitchen

.kitchen__utensils 

.utensils

.utensils__utensil

// that is exactly what you want because you are avoiding specificity. Which means you will never have to fight with your selectors, which means you will never have to use important tags.

＆＃13;

<div class="kitchen">
  <ul class="kitchen__utensils utensils">
    <li class="utensils__utensil"></li>
    <li class="utensils__utensil"></li>
    <li class="utensils__utensil"></li>
    <li class="utensils__utensil"></li>
  </ul>
</div>

＆＃13;

自定义类与列表的特定选择器（CSS）

1 个答案: