这篇文章主要介绍了CSS代码风格的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS 代码风格 基本设置 2 空格缩进
这篇文章主要介绍了CSS代码风格的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
CSS 代码风格
基本设置
2 空格缩进
UTF-8 编码
空白与格式
大括号与选择器之间留空,冒号后面留空,注释内外前后留空。
理由:据说这样比较漂亮。
div { }
span {
color: red;
}
在只有一条样式时允许和选择器写到同一行,不强制。
理由:写三行太占屏幕空间。
一个选择器中有多个样式声明时每条写一行。
理由:使报错可以精确到具体的规则上,便于排错。
多个选择器使用逗号隔开时写在不同的行,大括号不要另起一行。
理由:修改时不容易漏掉逗号后面的选择器。
div,
span {
color: red;
font-size: 12px;
}
每条样式声明后面都加上那个分号。
理由:复制起来方便。
所有最外层引号使用双引号。
理由:与 html 保持一致。
用逗号分隔的多个样式值写成多行。
理由:便于阅读与编辑。
.block {
box-shadow: 0 0 0 rgba(#000, 0.1),
1px 1px 0 rgba(#000, 0.2),
2px 2px 0 rgba(#000, 0.3),
3px 3px 0 rgba(#000, 0.4),
4px 4px 0 rgba(#000, 0.5);
}
功能限定
避免使用 ID 选择器。
理由:权重太高,不易维护。
禁止使用 @import 引入 CSS 文件。 理由:各种坑不解释。
命名与模块化
0 值的单位建议省略,但不强制。
理由:大部分 0 值的单位是没用的。
16 进制颜色值中的字母统一小写。
理由:切换大小写麻烦。
类名中的字母一律小写。
理由:它不区分大小写,难道有人想统一大写?
类名中只使用字母、数字以及“-”。
理由:要是没有限制的话我怕一些猴子使用阿拉伯文。
.hello {}
.module-title {}
.panel-level1 {}
.导航栏
感谢你能够认真阅读完这篇文章,希望小编分享的“CSS代码风格的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网node.js频道,更多相关知识等着你来学习!
--结束END--
本文标题: CSS代码风格的示例分析
本文链接: https://www.lsjlt.com/news/93690.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0