免费个人网站建设公司抖音seo公司

原文：CSS3 Quick Syntax Reference

协议：CC BY-NC-SA 4.0

二十七、最佳实践

现在你已经了解了 CSS 的基本原理。这最后一章回顾了样式表开发的良好编码实践和标准。遵循这些准则可以帮助您编写易于维护、重用和扩展的健壮 CSS 代码。

可重用代码

可管理样式表的一个关键思想是避免重复代码。类有助于实现这一目标，因为它们是可重用的，并且可以以不同的方式组合，为您提供了一个易于发展的灵活设计。

每当您发现共享样式属性的页面项目时，您应该考虑组合这些重复的模式。这使得重用和更新代码以及保持网站风格的一致性变得更加容易。考虑下面这个简单的例子:

.module {width: 200px;border: 1px solid #ccc;border-radius: 3px;
}
.widget {width: 300px;border: 1px solid #ccc;border-radius: 3px;
}

这些类有两个共同的样式，可以移到第三个类中以避免不必要的重复。这个过程使得类更加通用，因此更加可重用。

.box-border {border: 1px solid #ccc;border-radius: 3px;
}
.module { width: 200px; }
.widget { width: 300px; }

当为了重用而优化类时，考虑它们的大小是很重要的。目标是在不太宽也不太窄的类别之间找到中间立场。过宽的班级导致不必要的重复；太窄的类很难改变设计。

全局修改器

有一些非常常用的样式属性。与其将这些样式添加到每个其他类中，有时不如创建一个具有单一样式的通用类，然后将其应用到需要它的元素中。例如，向左或向右浮动元素就是这样一种常见的操作。这些样式非常适合作为全局修改器。

.left  { float: left; }
.right { float: right; }

当您想让一个元素浮动到右边或左边时，您可以简单地将这些类之一添加到元素中:

<div class="left">...</div>

当只需要一个样式属性时，这样的全局修饰符非常有用。但是，您应该避免将它们组合在一起，因为如果所有的页面项目都由这样的小类组成，那么调整您的设计会变得很困难。

样式表结构

通过组织样式表，您可以让自己和其他开发人员更容易快速理解 CSS 的结构。网站变得越大，越多的开发者参与其中，就越有必要将事情组织得井井有条。但是不管网站大小如何，始终保持样式表结构良好是一个好习惯。

样式表的顶部通常包括关于文件及其作者的信息。该元数据应该包括作者的姓名和联系信息。这样，如果出现关于文档的任何问题，当前在站点上工作的开发人员知道该问谁。其他可能有用的元数据包括文件的创建日期、最后修改日期、版本号、标题和描述。

/** Title: My Theme* Version: 1.2.3* Author: My Name*/

至于样式规则，它们应该被分成几个部分，每个部分都应该标上有区别的注释。这种分组和标记使您能够更快地找到您需要的内容。您需要的部分取决于站点，但这里有一些示例部分:

/* === Normalization === */
/* === Primary layout === */
/* === Secondary layout === */
/* === Tertiary layout === */
/* === Navigation === */
/* === Text-related === */
/* === Links and images === */
/* === General styles === */
/* === General classes === */
/* === Miscellaneous === */

部分名称后的等号有助于在视觉上将部分与其他注释区分开来。它们还充当一个标记，您可以通过搜索来轻松地遍历这些部分。

对于大型样式表，节名可以作为目录列在元数据下面，这使得开发人员更容易了解文件是如何组织的。

/* Table of Contents-----------------NormalizationPrimary layout (body, primary divs)Secondary layout (header, footer, sidebar)Tertiary layout (page regions)Navigation (menus)Text-related (paragraphs, headings, lists)Links and imagesGeneral styles (forms, tables, etc.)General classes (.clear, .center, etc.)Miscellaneous
*/

在每个部分中，您应该首先声明最通用的规则，然后是越来越具体的规则。您的元素可以继承样式，并且在需要时您可以更容易地覆盖特定的样式。

另一件要考虑的事情是如何在规则中构造属性。一种流行的方法是根据类型对属性进行分组。您不必像下面的示例那样标记组，但是如果您在整个样式表中保持组的顺序不变，会有所帮助。这样做使您能够更快地浏览规则以搜索特定的属性。

.myclass {/* Positioning */position: absolute;top: 0;right: 0;/* Box model */display: inline-block;width: 100px;height: 100px;/* Color */background: #ccc;color: #fff;/* Text */font-size: 1em;line-height: 1.2;text-align: right;/* Other */cursor: pointer;
}

请记住，这些只是指导方针；选择一个适合你的结构，并努力保持它的一致性。

命名规格

以明确其预期用途的方式命名类和 id 是有帮助的。这种结构化的命名约定意味着名称应该描述类或 id 的用途，而不是它的外观或它在 web 文档中的使用位置。

这种命名约定的优点是，更改网站的外观变得更加容易。例如，将 id 容器命名为#main-content比命名为#center-column-500px更好。除了直观地理解 id 的用法之外，名字还具有更多的用途，以防您以后需要调整它所应用到的元素的位置或大小。

#main-content {width: 500px;margin: 0 auto; /* centered */
}

名称应该有语义，但不要太语义化以至于限制重用。例如，命名一个类.header-top-margin不像命名一个类.small-top-margin(或者.small-tm)那样灵活。到后来回想起来，这个类主要用在 header 中是很容易的；例如，在 web 浏览器中查看页面源代码时，可以使用搜索功能搜索类名。

.small-top-margin { margin-top: 1em; }

除了传达预期用途，类名还可以显示它与其他类的关系。例如，如果一个容器类被称为.post，那么这个容器的标题可以被命名为.post-title，以表明这个类应该只在应用了.post类的元素中使用。

.post {margin: 1em 0;
}.post-title {font-size: 1.2em;}

标题类也可以写成.post.title，以确保.title类只能在使用.post类的容器中使用。然而，.post-title名称有助于避免命名冲突，并且不会增加特异性，因此命名约定通常是更可取的。注意，使用缩进进一步强调了规则之间的关系，这可以显著提高代码的可读性。

正常化

不同的浏览器呈现某些元素的方式略有不同，主要是因为它们的默认样式表有所不同。为了获得一个共享的基线，通常包括一组规则来规范这些浏览器的不一致性并设置合理的默认值。最受欢迎的选择是 GitHub Normalize.css项目。通过将这些规则包含在你的样式表的顶部(或者根据你的站点需求的一个子集)，你在所有的浏览器上都有一个一致的起点，你可以从这个起点开始构建。Normalize.css样式表包含大量注释，解释它解决的每个浏览器不一致。

排除故障

有许多有用的调试工具可以极大地简化 web 开发人员的工作。例如，Chrome 和 Firefox 具有内置的浏览器支持，可以在任何网页上实时调试 CSS、HTML 和 JavaScript 以进行测试。为了利用这一点，您可以在 Windows 上使用快捷键 Ctrl+Shift+I 或在 Mac 上使用快捷键 Cmd+Opt+I 来打开开发工具窗口。

或者，您可以右键单击页面上的某个元素，然后选择 Inspect Element，在元素检查模式下打开同一个窗口。此窗口的一个功能是准确地发现哪些样式适用于所选元素，以及当您打开或关闭特定样式时元素如何变化。要获得更复杂的调试和 web 开发工具，您可以下载 Firefox 浏览器的开发者版。 ²

确认

检查你的 CSS 是否符合 W3C 标准是一个好主意。不正确的代码可能会导致您的站点在不同浏览器中出现意外的结果。此外，拥有没有错误的代码是一个高质量网站的标志。

W3C 提供了自己的在线工具来验证 CSS。 ³ 它检查提交的页面，并返回页面上发现的任何错误和警告，供您修复。它还有一个类似的验证 HTML 文档的工具， ⁴ ，这也是非常重要的。为了使验证更加方便，您可以下载一个浏览器插件来检查页面代码，例如 Chrome、Firefox 和 Opera 上的 Web Developer 插件。 ⁵

单一样式表

出于性能原因，最好在一个外部样式表中包含一个站点的样式规则。这样做可以最大限度地减少加载网站所需的 HTTP 请求数量，同时允许缓存 CSS 文件，以便访问者的浏览器只需下载一次。

在大型网站的开发过程中，通常最好将样式规则分成几个更易于管理的 CSS 文件。为了两全其美，可以使用 CSS 预处理程序将这些开发文件合并成一个文件，作为站点构建过程的一部分。

预处理程序

随着网站的发展，它的样式表也在发展，当样式表变得难以浏览和维护时，它会很快达到一个临界点。降低大型样式表复杂性的一种方法是使用 CSS 预处理程序，比如 SASS。 ⁶ 预处理器以基本的编程特性，如变量、循环、条件和函数，可感知地扩展 CSS 语言。这允许您更好地组织样式表，并利用可重用的组件以更少的代码获得更好的结果。请注意，预处理程序并不扩展 CSS 标准本身。扩展语法中的样式表由程序处理，并转换成常规的 CSS 样式表。

缩小

缩小是从代码中删除不必要的字符以减小代码大小的过程。当一个 CSS 文件被缩小时，空白字符被删除，规则被优化和重构以更快地加载。这种压缩可以极大地减小文件的大小，从而以代码可读性为代价提高站点性能。由于可读性降低，最好使用未压缩的样式表，并在每次更新 CSS 文件时重复缩小步骤。缩小可以使用前面提到的 CSS 预处理器自动完成，也可以使用 Clean CSS 等在线工具手动完成。 ⁷

缩小工具不能做的一个优化是找到并删除未使用的 CSS 规则。一个有用的 Firefox 插件可以帮助你完成这个任务，它就是 Dust-Me 选择器。这个插件可以单独测试页面，也可以扫描整个网站来寻找未使用的选择器。

跨浏览器测试

即使您的代码已经过规范化和验证，在不同的浏览器中，尤其是在旧版本中，网页的呈现方式仍然会有一些差异。因此，有必要在您希望您的站点支持的所有浏览器版本中测试您的站点。

为了使这个测试过程更容易，你可以使用浏览器堆栈， ⁹ ，这是一个检查浏览器兼容性的在线工具。它向您展示了您的站点在您选择的不同版本的浏览器上的外观。您还可以看到您的网站在移动设备和平板电脑上的外观。

http://necolas.github.io/normalize.css/

2

www.mozilla.org/en-US/firefox/developer/

3

http://jigsaw.w3.org/css-validator/

4

http://validator.w3.org

5

http://chrispederick.com/work/web-developer/

6

https://sass-lang.com

7

www.cleancss.com

8

www.brothercake.com/dustmeselectors/

9

www.browserstack.com/screenshots