完美CSS文档的8个最佳实践网站建设的css美化2

2018-01-11 10:38

上一期我们讲到了完美CSS文档的8个最佳实践里面的第一条和第二条，现在这篇文章就主要讲第三条和第四条，下面进入正文

3.建立你的编码标准

您的编码标准或CSS样式指南是指您的团队已经同意编写CSS的方式。这包括编写代码的最佳实践，如格式化，命名和语法约定。许多公司已经分享了他们这样做的方式（本文来自CSS-Tricks有一个很棒的编译： CSS样式指南）。以下是我发现分享此类信息的几种方法：

不该做的事情

使用这种格式指出你想避免的事情，同时提供一个可行的选择。这消除了歧义，并鼓励人们做一个具体的事情。例如：

注意事项	这样做的
不要使用制表符缩进。	请使用四（4）个空格进行缩进。
不要使用under_scores或“camelCase”命名类或ID。	请使用破折号分隔单词。
不要使用Class和ID名称来反映底层的标记结构。 `.container-span` 并且`.small-header-div`是不好的名字。	从对象的角度思考CSS，并使用简单的名词作为名字。`.global-alert`并且`.badge`是好名字。
不要使用ID和过于具体的选择器风格。只有在绝对必要时才使用这些（例如表单控件或页面锚点）。	使用类来促进可重用性并减少CSS选择器特定性冲突。

最佳实践清单

将您的指导方针汇总成最佳实践并包含示例。这将使每个人更容易阅读和理解。例如：

最佳实践	例
在不同的行上写入多个选择器。	.btn， .btn-link { }
在选择器和大括号之间加入一个空格。	.selector { }
尽可能使用十六进制值的速记。	`#fff` VS `#ffffff`
以小写字母写入十六进制值。	`#3d3d3d` VS `#3D3D3D`
用单引号括起URL。一般来说，单引号比双引号优先，因为它们更容易输入。	`url ('/image.png')` VS `url("/image.png")`
除了角度（deg）和时间（s或ms）之外，不要使用单位为零（0）值。	`margin-right: 0;` VS `margin-right: 0px;`

一个开发者编写代码的方式可能与另一个开发者有很大的不同这就是为什么您的团队必须设置编码标准。这可以确保代码在整个项目中保持一致，从而更易于阅读，编写和审阅。但要确保你编码标准中包含的任何东西都是你的团队已经同意的做法。

我参与了一个项目，将其纳入我们的生活方式指南。作为代码的一部分，我们承诺并将这些最佳实践推向回购。然后为了确保每个人都在船上，团队中的每个人都必须先批准拉取请求，然后才能合并。这保证每个人都必须抽出时间来审查和讨论。

4.避免长样式表

当你将你的风格分解成更小更集中的样式表时，更容易记录它们。您还可以通过不必记录什么变得不言自明，节省时间。

例如，您可以为每个变量类型设置一个文件，而不是将一个800行的样式表与您可以在主题中使用的所有变量一起使用。这将节省时间，无需在文件中上下滚动，试图找到一些东西！不妨每次添加或重新命名一个新的部分时，不必每次更新索引都可以节省时间。

在一个很长的文件中，一个长长的索引...

		
									/*-------------------------------------------*\

									   variables.less

									   Index

									   - Color Palette

									   - Typography

									   - Buttons

									   - Forms

									   - Layout

									   - Messaging & Status

									   - General

									   - Navigation

									   - Carousel

									   - Jumbotron

									\*-------------------------------------------*/

打破文件，没有索引是必要的：

在大型应用程序中工作的另一个例子是modlet工作流程。它解释了为什么使用由组件组织的小文件可以更轻松地测试和组装它们。

相关文章链接：
第一条和第二条在这里可以看到完美CSS文档的8个最佳实践1
第三条和第四条在这里可以看到完美CSS文档的8个最佳实践2
第五条和第六条在这里可以看到完美CSS文档的8个最佳实践3
第七条和第八条在这里可以看到完美CSS文档的8个最佳实践4