我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSS代码风格的示例分析

这篇文章主要介绍了CSS代码风格的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联服务电话:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联网页制作领域十余年,包括花箱等多个行业拥有多年的网站维护经验,选择成都创新互联,为企业锦上添花。

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 {} /* OK */

.module-title {} /* OK */

.panel-level1 {} /* OK */

.导航栏 /* Fuck */

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS代码风格的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站题目:CSS代码风格的示例分析
本文链接:http://shouzuofang.com/article/iedhoc.html

其他资讯