CSS也要语义化

下面是CSS语义化的完整攻略，包含以下五个步骤：

步骤1：理解CSS语义化的概念

CSS语义化是指用具有意义的HTML标签和类名来编写CSS样式的过程。这样做的好处在于，可以让代码更易于阅读和维护，并且可以提升可访问性和SEO优化的效果。

步骤2：选择合适的HTML标签

在编写HTML代码时，应该选择最合适的HTML标签来描述内容。例如，对于一个网站的标题应该使用<h1>标签，而不是像<div>或<span>这样没有语义化的标签。

步骤3：使用语义化的类名

在编写HTML代码时，也应该为元素选择具有语义化的class名。例如，对于一个网站的导航栏，应该使用名称为nav的类名，而不是像header或menu这样的不够清晰的类名。

步骤4：避免使用过多的通用选择器

通用选择器（*）会匹配所有的HTML元素，但它往往会导致选择器的复杂度增加，而降低样式的可读性。因此，在编写CSS样式时，应该避免使用过多的通用选择器。

步骤5：使用含义明确的属性名

在编写CSS代码时，应该使用含义明确的属性名来描述样式。例如，对于字体颜色应该使用color属性，而不是font-color或text-color这样的不够清晰的属性名。

以下是两个具体的示例说明：

示例1：使用HTML5语义化标签和类名

<header>
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

在上面的示例中，这个网站使用HTML5中的语义化标签<header>和<nav>来包含网站的标题和导航栏。同时，为导航栏添加了一个具有语义化的类名main-nav。

示例2：使用含义明确的属性名

.article {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333;
}

在上面的示例中，选择了一个具有语义化的类名.article。同时，使用含义明确的属性名来描述样式，而不是使用类似font-size这样的不够清晰的属性名。