Question

如果你的div里面有各种各样的元素，那么在为这个HTML编写CSS规则时，显示关系和层次结构的好方法是什么：

<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>

我想知道如何为<p>元素编写和应用样式。这可以通过两种方式完成：

.tweet-general-item-summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>

OR

.tweet-general-item .summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item summary">Some summary text here</p>

哪种方式更好/可扩展/良好实践以及为什么？我必须能够在CSS中显示某种级别的层次结构/关系。我不能简单地拥有.summary样式，因为它对任何人都没有语义含义 - 设计师/开发人员需要知道从阅读CSS中得到什么样的总结。

Answer 1

看看BEM方法论：

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://bem.info/method/

您的示例如下：

<div class="tweet">
  <p class="tweet__summary"></p>
</div>

可扩展的CSS命名和子类

1 个答案: