CSS样式分离之再分离达到精简与重用

即使现代浏览器几乎可以处理任意大小的CSS，仍然有许多好处将CSS与HTML代码分离。首先，这使得HTML代码具有更高的可读性，使其更易于阅读和理解。其次，它允许您在需要的时候更轻松地重用CSS代码，并且可以使您的代码更易于维护。

以下是“CSS样式分离之再分离达到精简与重用”的完整攻略：

步骤1：将CSS从HTML中分离出来

将CSS分离出HTML代码的最基本方法是将CSS代码放入单独的.css文件中。但是，在实践中，将一些CSS规则保留在HTML标记的' style '属性中也是必要的。这通常是因为某些样式仅适用于某个元素，例如一个类。因此，建议根据您的项目需要来确定哪些CSS规则需要在HTML代码中的style属性中保留，哪些可以放入独立的CSS文件中。

步骤2：将常见的CSS规则提取到单独的文件中

如果您的项目中有一些CSS规则是在不同的HTML文件中重复使用的，您应该将这些通用规则提取到一个单独的CSS文件中。通过使用这种方法，您只需要更改一个文件中的规则，就可以同时影响所有使用它的HTML文件，这可以使您的代码更加容易维护。

例如，您的网站可能有一些通用的边距或相对位置规则，可以放到一个名为 common.css 的文件中。这样，每次需要使用这些规则时，您都可以从该文件中调用它们，而无需重复打造。

步骤3：使用預處理器進行更高效的CSS编写

现代的CSS預處理器，如Sass和Less，提供了一些高效的编写CSS代码的方法，例如变量、函数和混合。通过使用这些工具，您可以编写更少的代码来实现相同的效果，甚至可以更快地编写和修改样式表，而不必担心出现重复代码的问题。

因此，在将CSS从HTML中分离出来并提取常见规则后，您可以使用一个CSS预处理器来进一步减少代码大小并更好地重用代码。

示例1：使用公共类

假设您有两个网页，它们有如下风格样式：

/* Page 1 styles */
body {
  background-color: #f5f5f5;
}

#container {
  margin: 0 auto;
  width: 960px;
}

#header {
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 10px;
}

#footer {
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 10px;
}

/* Page 2 styles */
body {
  background-color: #fff;
}

#container {
  margin: 0 auto;
  width: 800px;
}

#header {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

#footer {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

可以看到， #container , #header 和 #footer ID的样式重复了。这是可以把它们重构为公共类，并使用它们进行样式，例如：

/* Common styles */
.container {
  margin: 0 auto;
}

.header {
  padding: 10px;
  height: 50px;
  background-color: #333;
  color: #fff;
}

.footer {
  padding: 10px;
  height: 50px;
  background-color: #333;
  color: #fff;
}

/* Page 1 styles */
body {
  background-color: #f5f5f5;
}

.container {
  width: 960px;
}

/* Page 2 styles */
body {
  background-color: #fff;
}

.container {
  width: 800px;
}

.header {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

.footer {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

现在，.container, .header 和 .footer 类仅定义一次，而不是在两个页面中各定义一次。这使项目的样式代码更加干净和整洁，并且可以在其他页面共享公共类。

示例2：使用CSS预处理器

下面是一个使用Sass预处理器来提高CSS代码可读性和重用性的示例：

// _common.scss
.container {
  margin: 0 auto;
}

.header {
  padding: 10px;
  height: 50px;
  background-color: #333;
  color: #fff;
}

.footer {
  padding: 10px;
  height: 50px;
  background-color: #333;
  color: #fff;
}

// _page1.scss
@import 'common';

body {
  background-color: #f5f5f5;
}

.container {
  width: 960px;
}

// _page2.scss
@import 'common';

body {
  background-color: #fff;
}

.container {
  width: 800px;
}

.header {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

.footer {
  background-color: #f5f5f5;
  color: #333;
  height: 80px;
  padding: 20px;
}

在此示例中，我们使用Sass's @import 指令将公共样式文件_common.scss 添加到每个页面的Sass文件中。这使得每个页面只需包含其特定样式，并且可以使用 $变量 来将样式属性分配给变量，这样可以更轻松地进行管理和修改。

由于这个过程的灵活性和定制性， 使用CSS预处理器的文件更容易维护，更具可读性，并且可以更高效地重用代码。