前端工程师纳米学位样式指引-CSS.PDFVIP

Udacity 优达学城 前端工程师纳米学位样式指南 - CSS 点此查看文档英文版（​pdf​，​GitHub.io​） 简介 该指南是你在项目进行过程中所需遵守的官方指南。优达学城的项目评估人员会根据该指南为你 的项目打分。在前端网页开发的世界中，有很多“最佳”样式供你选择。因此，为了减少学生在项 目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 一般格式规则 字母大小写 仅使用小写。 所有代码均使用小写，该规则适用于 CSS 选择符、属性和属性值 （字符串除外）。 不推荐： color: #E5E5E5; 推荐： color: #e5e5e5; 末尾空格 删除行尾​空格​。 行尾​空格​属于多余的符号，会使 diff 更加难以阅读。 不推荐： border: 0;__ 1 Udacity 优达学城 推荐： border: 0; 如果使用 Sublime Text ，你可在用户设置（User Settings）JSON 文件（可在文本编辑器的菜单中找 到）中添加以下代码，每当你以此方法储存文件时，去除行尾​空格​操作便会自动完成： trim_trailing_white_space_on_save: true 缩进 整个文件中的缩进应保持前后一致，使用 Tab 、2个空格或4个空格都可以，但需保持前后一致。 一般元规则 编码 使用 UTF-8 （无 BOM）。 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。不要将样式表的编码设置为假定的 UTF-8。 注释 在可行和必要时，对代码添加注释。 用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。 任务项 用 ​TODO:​ 标注待办事项和任务项 ： 仅用关键词 ​TODO​ 标注待办事项，不要使用 ​@@​ 等其他格式的字样。在任务项前加冒号，如： TODO: action item​。 推荐： /* TODO: add button elements */ 2 Udacity 优达学城 CSS 样式规则 CSS 有效性 使用有效的 CSS 。 使用有效的 CSS 是可测量的基准质量，可确保 CSS 的合理使用并有助于识别可删除的无效 CSS 代 码。 ID 和类名称 使用有意义或具有普遍性的 ID 和类名称。 不可使用意义含糊的 ID 和类名称，使用能够反映相应元素意义的名称或具有普遍性的通用名。 最好使用能够反映相应元素意义的具体名称，因为这些名称最易于理解且不易变更。 具有普遍性的通用名被用于与类似元素意义相仿的元素，主要起辅助作用。 不推荐： .p-998 { … } .btn-green { … } 推荐： .gallery { … } .btn-default { … } 类型选择符 避免用类型选择器限定 ID 和类名称。 除非情况需要（例如，在辅助类型中），否则不要将元素名和 ID 或类名称同时使用。为提高性能，避 免使用不必要的祖先选择符。 在 CSS 文件中使用 ID 也是较糟糕的做法，类别始终比名称更具优势，如果你需要给予某元素一个特 殊的名称，请使用类别。（ ID 的唯一优点是在存在数千个类似元素的页面上能保持较快的运行速 度。） 不推荐： ul#example { … } div.error { … } 推荐： 3 Udacity 优达学城 .example { … } .error { … }