CSS 选择器还是 CSS 类名？答案

【问题标题】：CSS selector or CSS classNames?CSS 选择器还是 CSS 类名？
【发布时间】：2023-02-15 17:37:17
【问题描述】：

在 CSS 中对嵌套代码使用选择器或类名更好吗？在下面的示例中，父级 div 中包含文本，是否只使用选择器来设置子级的样式更好？或者他们应该有类名吗？有关系吗？如果重要的话，是因为可读性/干净的代码、性能/优化还是其他原因？

示例 1 - 使用类名：

HTML

<div className="flexbox-parent"> 
 <div className="flexbox-header"> 
  <h1 className="primary-title">Title</h1>
 </div>
 <div className="content">
  <h3 className="tertiary-title"> Tertiary title </h3>
  <p className="text-content"> A paragraph with some text</p>
  <br/>
  <p className="text-content"> A paragraph with some text</p>
 </div>
</div>

CSS

   .flexbox-parent {
     display: flex;
     justify-content: center;

      .flexbox-header {
        display: flex;
        justify-content: center;

        .primary-title {
           font-size: 2rem;
           color: grey;
        }
      }

   }

或者示例 2 - 使用选择器：

HTML

<div className="flexbox-parent"> 
 <div className="flexbox-header"> 
  <h1>Title</h1>
 </div>
 <div className="content">
  <h3> Tertiary title </h3>
  <p>A paragraph with some text</p>
  <br/>
  <p>A paragraph with some text</p>
 </div>
</div>

CSS:

.flexbox-parent {
  display: flex;
  justify-content: center;

  .flexbox-header {
     display: flex;
     justify-content: center;

     h1 {
      font-size: 2rem;
      color: grey;
     }

     p {
      font-size: 0.8rem;
      color: green;
     }
  }


}

哪个更好？

【问题讨论】：

标签： css css-selectors styling class-names

【解决方案1】：

这两种方法都很好，可用于设置嵌套元素的样式。然而，使用类名可以使代码更加模块化并且更易于维护，尤其是对于具有复杂 HTML 结构的大型项目。使用类时，可以轻松更改 HTML 的结构而不影响 CSS。

使用选择器也适用于具有简单 HTML 结构的小型项目，但随着项目的增长，阅读和理解哪个选择器针对哪个元素会变得困难，尤其是当您有多层嵌套时。

在性能方面，使用选择器或类没有太大区别，因此选择取决于您的个人喜好和项目要求。如果您想要干净的代码和可维护性，请使用类名一般推荐。

【讨论】：