我的前端规范——CSS篇
相关文章
简书原文:https://www.jianshu.com/p/e87bfd27ff59
我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html
我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html
我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html
我的前端规范——JavaScript篇:http://www.cnblogs.com/shcrk/p/9271620.html
大纲
前言
1、css属性书写顺序
2、css属性写法
前言
规范对于一个项目来说是很重要的,统一的规范对代码的一致性、项目的质量、工作的协调都有很大的帮助,而且有时候可以规避很多意料不到的错误。
当然,规范是死的,人是活的。我总结的前端规范是我认为对我来说比较适合的,我又认可的,所以我能比较好的接受和使用。但是,不同的团队,不同的项目需要遵守的规范也许就是不一样的。规范的作用是让项目的代码看起来更有统一性,让团队的协作更方便,因此,根据具体的情况制定统一的规范才是最合理的,而这里我给出的也只是我认为比较符合我风格和习惯的,至于具体的规范还是要依据具体的情况来总结制定。
单独写成一篇的话篇幅很大,因此我会将我的总结写成:开篇、css、html、js四篇,让有需要的读者能够更方便的查找到想要的知识。
1、css属性书写顺序
1、显示属性
2、元素位置
3、元素属性
4、元素内容属性
- .header {
- /* 显示属性 */
- display || visibility
- list-style
- position
- top || right || bottom || left
- z-index
- clear
- float
- /* 自身属性 */
- width
- max-width || min-width
- height
- max-height || min-height
- overflow || clip
- margin
- padding
- outline
- border
- background
- /* 文本属性 */
- color
- font
- text-overflow
- text-align
- text-indent
- line-height
- white-space
- vertical-align
- cursor
- content
- }
2、css属性写法
1、小图片(必须)sprite 合并(将需要用到的小图片全部放到一个大的图片上,通过定位来展示大图片上不同地方的小图片,从而减少图片占用的资源,加快网页加载的速度。)
2、每个样式属性后加 ";",方便压缩工具“断句”。
3、禁止将样式写为单行(单行显示不好注释,不好备注,这最后可以交给压缩工具处理)。
4、禁止使用行内(inline)样式。
5、禁止使用"*"来选择元素
(别这样写,这样写是没有必要的,一些元素在浏览器中默认有margin或padding值,但是只是部分元素,没有必要将所有元素的margin、padding值都置为0。)
- * {
- margin: 0;
- padding: 0;
- }
6、带前缀的属性
当使用特定浏览器带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。
- .selector {
- -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
- box-shadow: 0 1px 2px rgba(0,0,0,.15);
- }
7、优化css选择器
css选择器是从右边到左边进行匹配的。如:
- #header a {
- color: #444;
- }
- /*
- 浏览器会检查整个文档中的所有链接,然后浏览器并不仅仅检查每个链接的父元素,还要遍历
- 文档树去查找 id 为 header 的祖先元素,如果被评估的链接不是 header 的后代,那么浏览
- 器就要向上一级遍历知道文档的根节点。针对此问题,有以下几个解决方法:
- 7.1、避免使用通配规则
- 除了传统意义的通配选择符之外还包括相邻兄弟选择符, 子选择符, 后代选择符和属
- 性选择符。推荐id、class和标签选择符。
- 7.2、不要限定id选择符
- 页面中指定一个id只能对应一个元素,所以没有必要添加额外添加限定符,
- 如: div#header ,应该简化为: #header(提权的除外)。
- 7.3、不要限定类选择器
- 不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。例如:
- ul.recommend ,改成 .recommend-list 或者 .list-recommend。
- 7.4、让规则越具体越好
- 尽量不要使用 ul li a 这样长的选择符,最好使用 .list-anchor 之类的选择符。
- 7.5、避免使用后代选择符
- 通常处理后代选择符开销最高,使用字选择符更高效,最好使用下一条代替。
- 7.6、避免使用标签子选择符
- 如果有如: #header > li > a,这样基于子标签的自选择符,那么应该使用一个
- class来关联每个元素如: .header-anchor。尽量使用具体的类代替子选择符。
- 7.7、命名比较短的词,或者缩写的不允许直接定义样式,如:.title,.hd,.bd,.body.
- 必须用上级节点进行限定,如:.recommend-mod .title
- */
8、空格的使用,有些规则一定要执行,不仅是为了美观,同时是为了避免低版本的浏览器的bug
选择器与( 之前必须要有空格
属性名的 : 后必须要有空格
属性名的 : 前禁止加空格
- .hotel-content {
- font-weight: bold;
- }
9、多选择器规则之间必须换行
当样式针对多个选择器时每个选择器占一行
- /* 推荐的写法 */
- a.btn,
- input.btn,
- input[type="button"] {
- ......
- }
10、禁止向0后添加单位(只是为了统一)
- .obj {
- left: 0;
- }
我的前端规范——CSS篇的更多相关文章
- 我的前端规范——JavaScript篇
相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 我的前端规范——HTML篇
相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 前端编码规范 -- css篇
合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...
- grunt前端打包——css篇
[导读] 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 前端打包的工具有很多,我用的习惯的就是这个gru ...
- 前端面试——css篇
css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...
- 后端码农谈前端(CSS篇)第二课:CSS的5个来源
0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
- 网站前端开发--css篇
Ⅰ 全局:global.css 全局样式为全站公用,为页面样式基础,页面中必须包含. 结构:layout.css 页面结构类型复杂,并且公用类型较多时使用.多用在首页级页面和产品类页面中. 私有:st ...
- 后端码农谈前端(CSS篇)第八课:继承与层叠
一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...
- 后端码农谈前端(CSS篇)第七课:定位与浮动
一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...
随机推荐
- 【习题 8-14 UVA - 1616】Caravan Robbers
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分长度. 显然长度越长.就越不可能. 二分的时候.可以不用管精度. 直接指定一个二分次数的上限就好. 判断长度是否可行.直接用贪心 ...
- 【Uva 10163】Storage Keepers
[Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...
- cocos2d-x cocoStudioUI编辑器导出文件的使用
代码演示样例: UILayer* layer = UILayer::create(); layer ->addWidget(CCUIHELPER->createWidgetFromJson ...
- OpenStack_Swift源代码分析——ObjectReplicator源代码分析(1)
1.ObjectorReplicator的启动 首先执行启动脚本 swift-init object-replicator start 此执行脚本的执行过程和ring执行脚本执行过程差点儿相同.找到s ...
- ajax嵌套ajax 可能出现问题 的解决办法
ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来 第一种 描述:如果条件许可,把两次请求都放在服务端处理掉一起发回来,这些就在客户端只有一次ajax了 优点:代码放在 ...
- Flume的data flow(数据流)
data flow描述了数据从产生,传输.处理并最终写入目标的一条路径. 数据的采集的流向!如下图所示.
- (转)Tomcat目录结构
首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...
- ToggleButton控件
ToggleButton 两种状态 ·状态button -继承自CompoundButton ·主要属性:-Android:textOn -Android:textOff ·主要方法: ...
- animation-list -帧动画
帧动画实现起来比较简单,今天接触到使用xml来创建帧动画,记录下来. 它说白了,其实就是动态的展示图片而已 1.在xml中定义帧动画,如下 <?xml version="1.0&quo ...
- Android .getRGB得到是负数,解决方案
情景:ava.awt.color 下面的getRGB怎么得出的是负数???本来想通过getRGB得到一个整数,在另外的一个部分在根据这个整数构件一个color,因为参数规定只能能传整数!!!color ...