相关文章

  简书原文: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篇的更多相关文章

  1. 我的前端规范——JavaScript篇

    相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  2. 我的前端规范——HTML篇

    相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  3. 前端编码规范 -- css篇

    合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...

  4. grunt前端打包——css篇

    [导读] 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 前端打包的工具有很多,我用的习惯的就是这个gru ...

  5. 前端面试——css篇

    css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...

  6. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  7. 网站前端开发--css篇

    Ⅰ 全局:global.css 全局样式为全站公用,为页面样式基础,页面中必须包含. 结构:layout.css 页面结构类型复杂,并且公用类型较多时使用.多用在首页级页面和产品类页面中. 私有:st ...

  8. 后端码农谈前端(CSS篇)第八课:继承与层叠

    一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...

  9. 后端码农谈前端(CSS篇)第七课:定位与浮动

    一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...

随机推荐

  1. HDU 3400 Line belt (三分再三分)

    HDU 3400 Line belt (三分再三分) ACM 题目地址:  pid=3400" target="_blank" style="color:rgb ...

  2. Linux - 用 Konstruct 安装 KDE 3.x

    make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...

  3. js12--块作用域函数作用域

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. ellipsize-TextView省略号的设定

    ellipsize主要是当TextView的文字过长的时候,我们可以让它显示省略号 用法如下: 在xml中 <!--省略号在结尾--> android:ellipsize = " ...

  5. php课程 13-43 mysql的数据结构是什么

    php课程 13-43 mysql的数据结构是什么 一.总结 一句话总结:cs结构,客户端,服务器 1.常用的比较出名的数据库有哪些? SQL数据库(关系型):1.收费:DB2SqlserverOra ...

  6. thinkphp多层volist实现多表查询

    thinkphp多层volist实现多表查询 一.总结 二.截图 三.代码 1.控制器 2.视图

  7. JSTL之C标签学习

    JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...

  8. iTOP-4412开发板p2p视频

    整体框架: 一.发送端 1.摄像头通过V4L2接口得到YUV视频格式,可以在win7上用yuvplayer播放 2.使用4412硬件编码模块MFC提供的接口进行硬件编码,得到.264文件,可以在win ...

  9. 设计模式六大原则(六): 开闭原则(Open Closed Principle)

    定义: 一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 问题由来: 在软件的生命周期内,因为变化.升级和维护等原因需要对软件原有代码进行修改时,可能会给旧代码中引入错误,也可能会使我们不得不 ...

  10. RocketMQ(八):消息发送

    匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...