我一直认为专业是一种态度。不同于业余,专业代表无论技术高低都会遵守一定的规范,专业代表对某一领域不断的精益求精。专业就是比业余逼格高。

习惯书写规范

css 属性声明的顺序:Positioning(定位)---Box model(盒子模型)---Typographic(文字系列)--Visual(背景颜色)--其他(例animation)

 .declaration-order {
/* Positioning */
position: absolute;
top:;
right:;
bottom:;
left:;
z-index:; /* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden; /* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center; /* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8; /* Other */
cursor: pointer;
}

参考示例

选择器分组时,保持独立选择器独占一行;

声明左括号{前加一个空格;

声明右括号}要单独成行;

声明中的:后要加一个空格;

声明语句应以;结尾;

一般以逗号分隔的属性值,每个逗号后应添加一个空格;

 .selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

参考示例

css尽量缩写。比如font、margin;

去掉前面的0.比如font-size:.8em;

16进制的颜色代码尽量缩写;

链接的设置顺序:a:link -> a:visited -> a:hover -> a:active;

语义化命名class或id;

避免嵌套过多,尽量不要超过3级;

避免用id和class叠加使用;

使用连字符 - 作为ID、Class名称界定符,不要驼峰命名法和下划线;(这条我非常排斥,复制粘贴很不方便的。另外一些坑也是出现在ie6那代版本浏览器,过去这么久了 这条应该可以作废了)

移动端经常会用到媒体查询@media (max-width: 768px),媒体定义的属性要放到附近,避免修改时遗漏。

注释的写法:

/* Header */
内容区
/* End Header */

专业的负责

/*
@name: 文件的名称
@description: 简要的描述这个css 文件功能
@require: 依赖文件,没有就不用写
@author: 作者 最好附带联系方式(邮箱)
*/

  

性能书写规范

js动画时,尽量使用requestAnimationFrame,避免使用setTimeout,setInterval。

避免通过类似 jQuery animate()-style 改变每帧的样式,使用 CSS 声明动画会得到更好的浏览器优化。

使用 translate 取代 absolute 定位就会得到更好的 fps,动画会更顺滑。

尽量不要用float,渲染计算量大。

浏览器读css时,是从右像左读的,所以下面可以少许的提升浏览器渲染速度。

使用继承

 /* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }

避免使用通用选择器。

.content * {color: red;}

避免使用标签或 class 选择器限制 id 选择器。

避免使用标签限制 class 选择器。

button#backButton {…}
button.backButton {…}

避免使用多层标签选择器。使用 class 选择器替换,减少 css 查找

treeitem[mailfolder="true"] > treerow > treecell {…}

工作我们是专业的之css规范的更多相关文章

  1. NEC css规范

    CSS规范 - 分类方法 SS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”. ...

  2. 前端开发人员要注意的css规范,css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  3. Scoped CSS规范草案

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是We ...

  4. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  5. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  6. 瞬间从IT屌丝变大神——CSS规范

    CSS规范主要包括以下内容: CSS Reset用YUI的CSS Reset. CSS采用CSSReset+common.css+app.css的形式. app.css采用分工制,一个前端工程师负责一 ...

  7. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  8. 新手不得不注意HTML CSS 规范

    作为一名新进的程序菜鸟,根本不知道从哪里开始学起好,前辈都说HTML CSS 规范是一个十分需要注意的点,要我记下,特地转来保存一下,大家相互学习 //总论 本规范既然一个开发规范,也是一个脚本语言参 ...

  9. 前端CSS规范大全

    一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...

随机推荐

  1. JS stacktrace(Node内存溢出)

    vscode运行项目时,保存.vue文件,项目突然终止运行.输入命令npm run dev重新运行后,终端显示下面的错误. 解决方案: 如果是run dev时报错,在package.json文件里的s ...

  2. vue中v-cloak解决刷新或者加载出现闪烁(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  3. Day05 -寻找自己:Ruby的self物件与singleton method

    前情提要:在第四天里,我们用参赛者的例子解说实体方法与类别方法.类别中的实体物件,想要玩弄方法时,可以有三种取用方式:(跟斯斯有三种一样) 该类别所定义的实体方法. 模块中可取得的实体方法.(关于模块 ...

  4. Form-encoded method must contain at least one @Field.

    https://blog.csdn.net/liunian823/article/details/80290855 记得之前遇到过这个问题,并且记录笔记了,这次再翻笔记,却没有找到...搜索 了下. ...

  5. java api 批量数据库操作

    Statement.class:executeBatch() implement interface: PreparedStatement implement class: JdbcOdbcPrepa ...

  6. day49 定位布局和过渡动画

    复习 1.盒子在父级水平居中 margin: 0 auto; 2.文本样式操作 color: red; text-align: center; font: 900 30px/200px "S ...

  7. 网站JS控制的QQ悬浮

    这是一个网站JS控制的QQ悬浮客服:代码1document.writeln("<div id=\"feedback\"><div id=\"f ...

  8. 通过代码启动appium服务

    如果选择npm安装的最新版appium 1.8.0以上版本,启动appium的时候,你会发现无法使用Node.js命令 这里给出两种方法来启动appim: 方法一: /** * 使用AppiumSer ...

  9. 实时ETL

    传统的ETL通常采用批处理的方式,一般来说是每天的夜间进行,当天的数据要到第二天才可以获得.随着数据仓库技术的逐步成熟,企业对数据仓库时间延迟的要求更高,希望达到零延迟,也就出现了实时ETL. 实时E ...

  10. java web项目由http转换成https遇到的各种坑

    java web项目由http转换成https遇到的各种坑 这篇文章写给自己在经历项目由http转换成https遇到的各种坑所做的一份笔记,留给以后自己看,或者和开发的朋友也刚好遇到和我一样的问题的朋 ...