NEC的学习笔记
写过很多代码后,会有代码的规范有一些需求,会有想写出美观、规范、易懂的代码。
今天学习了NEC,全称Nice Easy CSS(http://nec.netease.com/),顾名思义,就是为了写简单漂亮的CSS代码,下面是我今天所学。
PS:有可能有些我理解会有问题。
规范
我最看重这个,里面的框架、代码库、插件我觉得不是太重要。
CCS规范
CSS文件的分类:
公共型样式:也就是各个页面共用的样式
特殊型样式:当前页面的特殊样式(只此页面使用)
皮肤型样式:换肤的样式,有三个文件(如果产品需要换肤功能,那么我们需要将颜色、背景等抽离出来放在这里。——摘自NEC规范文档)
1.global.css:皮肤的全局样式
2.index.css:当前页面的特殊皮肤样式(PS:我自己的理解,NEC里面并没有说)
3.skin.css:皮肤的皮肤样式
CSS内部分类及其顺序:
1.重置(reset)和默认(base)(tags):消除默认样式和浏览器差异,并设置部分标签的初始样式
2.统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式!
3.布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
4.模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等
5.元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
6.功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
7.皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
8.状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel。
——摘自NEC规范文档
我觉得这样分挺有意思的,看起来很规范。
命名规则:
有时候命名是个很头痛的问题,有时并不知道怎么命名才是恰当的,合理的。当然这里的命名规则当然是NEC所提出的规则,并不是说强制有规范要这样写。
NEC的命名规则说得有些散,或者说只是一种教人不要做什么的提示,我试着把它要说的东西分成两部分,一是NEC命名规则,另一是好的命名习惯。
NEC命名规则:
其实NEC的命名规则也就两个
1.分类的命名方法:使用单个字母+"-"为前缀
布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。
——摘自NEC规范文档
而我们需要做的只是分辨我们要写的CSS是什么分类,这个简单吧。
2.后代选择器命名
NEC在这个部分说得有一些绕,我尝试自己说清楚。
1.不要用单个字母做类选择器,因为这样会跟分类命名(.g-)有冲突,例如你写了一个.a,你可能写一个.a-expand做拓展,那这不就冲突了。
2.语义化标签可作为后代选择器,比如:.m-list li{}。
PS:这里必需强调的是,所有的CSS命名都是 分类 + 后台选择器 ,不能出现单独出现的后代选择器, 这样是为了避免CSS污染,在多人协作的时候互不冲突。
好的命名习惯:
1.使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。——摘自NEC规范文档我觉得这点给我的警示最大,的确有的时候用ID选择器写CSS,尽管是不考虑重用,但写起来总感觉别捏。
2.后代选择器
后代选择器不需要完整表现结构树层级,尽量能短则短。
后代选择器不要在页面布局中使用,因为污染的可能性较大;
3.命名应简约而不失语义
代码格式:
1.选择器、属性和值都使用小写
在xhtml标准中规定了所有标签、属性和值都小写,CSS也是如此。
——摘自NEC规范文档有时我会写成小驼峰的样子,导致看起来好别捏,这个有必要遵守。
2.单行写完一个选择器定义便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。
例如:{.m-list li,.m-list h3{
width
:
100px
;
padding
:
10px
;
border
:
1px
solid
#ddd
;}
——摘自NEC规范文档
对于这个说法,我是非常赞同的,有些人说每个属性一行才是规范的。我不得不说一个观点是,代码是给人看的,只有在运行的时候才拿给机器运行。我试过每个属性一行,但看起来特别麻烦,特别在模块多的时候,都不能一目了然,看得很痛苦,所有我建议这样写。
3.省略值为0时的单位
为节省不必要的字节同时也使阅读方便,我们将0px、0em、0%等值缩写为0。
例如: .m-box{
margin
:0
10px
;
background-position
:
50%
0;
}
——摘自NEC规范文档
4.根据属性的重要性按顺序书写先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。
——摘自NEC规范文档这个建议也是不错
5.私有在前,标准在后
先写带有浏览器私有标志的,后写W3C标准的。
例如:.m-box{-webkit-
box-shadow
:0 0 0
#000
;-moz-
box-shadow
:0 0 0
#000
;
box-shadow
:0 0 0
#000
;}
——摘自NEC规范文档这个NEC并没说明为什么要这样写,那我就说一下,首先这些-webkit-
box前缀,是浏览器私有标志,当浏览器还实现未标准的属性,上面写法是没有问题的。而随着时间发展,属性可能被标准化,上面写法也是没问题的,但如果把标准写在前面,如果私有属性和最后的标准属性不一致就会有兼容问题。
6.选择器顺序
从大到小(以选择器的范围为准)
从低到高(以等级上的高低为准)
从先到后(以结构上的先后为准)
从父到子(以结构上的嵌套为准)
——摘自NEC规范文档
文章到这里差不多结束了,我认为重要的就这些东西,其他的可以去NEC官网上看,bye。
NEC的学习笔记的更多相关文章
- CSS规范—分类方法(NEC规范学习笔记)
一.CSS文件的分类和引用顺序 Css按照性质和用途,将Css文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用,有需要可以添加版本号 1.公共型样式:包含以下几个部分 标签的重置 ...
- 我的Android进阶之旅------>Android中编解码学习笔记
编解码学习笔记(一):基本概念 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放license收费等等 ...
- 学习笔记:CentOS7学习之十六:LVM管理和ssm存储管理器使用
目录 学习笔记:CentOS7学习之十六:LVM管理和ssm存储管理器使用 16.1 LVM的工作原理 16.1.1 LVM常用术语 16.1.2 LVM优点 16.2 创建LVM的基本步骤 16.2 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
随机推荐
- 重新发现梯度下降法--backtracking line search
一直以为梯度下降很简单的,结果最近发现我写的一个梯度下降特别慢,后来终于找到原因:step size的选择很关键,有一种叫backtracking line search的梯度下降法就非常高效,该算法 ...
- 实现让Lync client也能够"潜水"隐身聊天
看到MSN或QQ,都支持隐身聊天. Lync Server 2013也是支持的. 1.Server端:Lync 2013 Server 缺省策略是没有设置显示脱机功能.(设置前截图) 2.直 ...
- JavaScript中的String对象
String对象提供的方法用于处理字符串及字符. 常用的一些方法: charAt(index):返回字符串中index处的字符. indexOf(searchValue,[fromIndex] ...
- Node.js 的module 系统
相较于原生的JavaScript,不同的JavaScript文件之间很难共享变量.有鉴于此,Node.js在JavaScript的基础上进行了扩充,引入了require,exports,module三 ...
- java-Filter
java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...
- XPS 15 9530使用Windows10频繁发生Intel HD Graphics 4600驱动奔溃的一种解决方法
本人使用XPS 15 9530.集成显卡为Intel HD Graphics 4600.操作系统Windows 10 Pro,使用过程当中经常会发生集成显卡奔溃的问题,错误提示如下: Display ...
- iOS实现图像素描效果
使用GPUImageSketchFilter对象实现图像素描效果 NSString *const kGPUImageSketchFragmentShaderString = SHADER_STRING ...
- BZOJ1008 /乘法原理+快速幂 解题报告
1008: [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生 ...
- BZOJ3732 解析报告//LCA,最小生成树
3732: Network 题目描述 给你N个点的无向图 (1 <= N <= 15,000),记为:1…N. 图中有M条边 (1 <= M <= 30,000) ,第j条边的 ...
- Mysql数据库安全管理配置
1.删除test库 原因: The default MySQL installation comes with a database named test that anyone can access ...