全面总结CSS代码的编写规范及优化建议

2024-07-11 08:33:19

字体：大中小

来源：转载

供稿：网友

结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码
使用不带 BOM 的 UTF-8 编码。

在 HTML 中指定编码<meta charset="utf-8">；
无需使用@charset 指定样式表的编码，它默认为 UTF-8；
一律使用小写字母

CSS Code复制内容到剪贴板

省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

CSS Code复制内容到剪贴板

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> /* Recommended */
.example { background: url(//www.google.com/images/example);
}
/* Not recommended */ .example {
background: url(http://www.google.com/images/example); }

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

CSS Code复制内容到剪贴板

/* ========================================================================== 组件块
============================================================================ */
/* 子组件块 ============================================================================ */