没有合适的资源?快使用搜索试试~ 我知道了~
在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法。CSS 文档分析 无论编写什么文档,我们都应当维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。 总则 将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为力。 我倾向于
资源推荐
资源详情
资源评论
CSS的一些编程规范总结的一些编程规范总结
在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:
保持 CSS 易于维护
保持代码清晰易懂
保持 CSS 的可拓展性
为了实现这一目标,我们要采用诸多方法。
本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看
法。
CSS 文档分析文档分析
无论编写什么文档,我们都应当维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。
总则 总则
将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为
力。
我倾向于用 4 个空格而非 Tab 缩进,并且将声明拆分成多行。
单一文件与多文件 单一文件与多文件
有人喜欢在一份文件文件中编写所有的内容,而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做
法。无论你选择哪种,下文的规则都将适用,而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在
于目录以及区块标题:
目录 目录
在 CSS 的开头,我会维护一份目录,就像这样:
CSS Code复制内容到剪贴板
/*————————————*\
$CONTENTS
\*————————————*/
/**
* CONTENTS…………You’re reading it!
* RESET……………Set our reset defaults
* FONT-FACE………..Import brand font files
*/
这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。
如果你在维护一份单文件 CSS,对应的区块将也在同一文件中。如果你是在编写一组小文件,那么目录中的每一项应当
对应相应的 @include 语句。
区块标题 区块标题
目录应当对应区块的标题。如下:
CSS Code复制内容到剪贴板
/*————————————*\
$RESET
\*————————————*/
区块标题前缀 $ 可以让我们使用 [Cmd|Ctrl]+F 命令查找标题名时将搜索范围限制在区块标题中。
如果你在维护一份大文件,那么在区块之间空 5 行,如下:
CSS Code复制内容到剪贴板
/*————————————*\
$RESET
\*————————————*/
[Our
reset
styles]
/*————————————*\
$FONT-FACE
\*————————————*/
在大文件中快速翻动时这些大块的空档有助于区分区块。
如果你在维护多份以 include 连接的 CSS 的话,在每份文件头加上标题即可,不必这样空行。
代码顺序 代码顺序
尽量按照特定顺序编写规则,这将确保你充分发挥 CSS 中第一个 C 的意义:cascade,层叠。
一份规划良好的 CSS 应当按照如下排列:
Reset 万物之根源
元素类型 没有 class 的 h1、ul 等
对象以及抽象内容 最一般、最基础的设计模式
子元素 由对象延伸出来的所有拓展及其子元素
修补 针对异常状态
如此一来,当你依次编写 CSS 时,每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部
分,减少某些特殊的问题,组成更理想的 CSS 结构。
关于这方面的更多信息,强烈推荐 Jonathan Snook 的 SMACSS。
CSS 样式集分析样式集分析
CSS Code复制内容到剪贴板
[selector]{
[property]:[value];
[<- Declaration ->]
}
[选择器]{
[属性]:[值];
[<- 声明 ->]
}
编写 CSS 样式时,我习惯遵守这些规则:
class 名称以连字符(-)连接,除了下文提到的 BEM 命名法;
缩进 4 空格;
声明拆分成多行;
声明以相关性顺序排列,而非字母顺序;
有前缀的声明适当缩进,从而对齐其值;
缩进样式集从而反映 DOM;
保留最后一条声明结尾的分号。
例如:
CSS Code复制内容到剪贴板
.widget{
padding:10px;
border:1px solid #BADA55;
background-color:#C0FFEE;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.widget-heading{
font-size:1.5rem;
line-height:1;
font-weight:bold;
color:#BADA55;
margin-right:-10px;
margin-left: -10px;
padding:0.25em;
}
剩余8页未读,继续阅读
资源评论
weixin_38674512
- 粉丝: 0
- 资源: 889
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功