CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/
NEC框架的CSS规范:
统一语义理解和命名
语义 | 命名 | 简写 |
---|---|---|
文档 | doc | doc |
头部 | head | hd |
主体 | body | bd |
尾部 | foot | ft |
主栏 | main | mn |
主栏子容器 | mainc | mnc ( c 表示 child ) |
侧栏 | side | sd |
侧栏子容器 | sidec | sdc |
盒容器 | wrap/box | wrap/box |
语义 | 命名 | 简写 |
---|---|---|
导航 | nav | nav |
子导航 | subnav | snav |
面包屑 | crumb | crm |
菜单 | menu | menu |
选项卡 | tab | tab |
标题区 | head/title | hd/tt |
内容区 | body/content | bd/ct |
列表 | list | lst |
表格 | table | tb |
表单 | form | fm |
热点 | hot | hot |
排行 | top | top |
登录 | login | log |
标志 | logo | logo |
广告 | advertise | ad |
搜索 | search | sch |
幻灯 | slide | sld |
提示 | tips | tips |
帮助 | help | help |
新闻 | news | news |
下载 | download | dld |
注册 | regist | reg |
投票 | vote | vote |
版权 | copyright | cprt |
结果 | result | rst |
标题 | title | tt |
按钮 | button | btn |
输入 | input | ipt |
语义 | 命名 | 简写 |
---|---|---|
浮动清除 | clearboth | cb |
向左浮动 | floatleft | fl |
向右浮动 | floatright | fr |
内联块级 | inlineblock | ib |
文本居中 | textaligncenter | tac |
文本居右 | textalignright | tar |
文本居左 | textalignleft | tal |
垂直居中 | verticalalignmiddle | vam |
溢出隐藏 | overflowhidden | oh |
完全消失 | displaynone | dn |
字体大小 | fontsize | fs |
字体粗细 | fontweight | fw |
语义 | 命名 | 简写 |
---|---|---|
字体颜色 | fontcolor | fc |
背景 | background | bg |
背景颜色 | backgroundcolor | bgc |
背景图片 | backgroundimage | bgi |
背景定位 | backgroundposition | bgp |
边框颜色 | bordercolor | bdc |
语义 | 命名 | 简写 |
---|---|---|
选中 | selected | sel |
当前 | current | crt |
显示 | show | show |
隐藏 | hide | hide |
打开 | open | open |
关闭 | close | close |
出错 | error | err |
不可用 | disabled | dis |
/*
#hd Header
#nv Navigation
#mu Customer menu
.wp Wrap
#ct Container
.mn Main area
.sd Side area
#ft Footer
----------------
.bm Block in main area
.bn Block in nerrow area
.bw Block in full width
#pp Personal Panel
.pm Personal Message (Window)
.pmfl PM friend list (Window)
*/
(推荐)页面部件库整理
page -> grid(网格/布局) -> module(模块) -> widget(组件) -> unit(元件) -> figure(图形,比如说某个按钮)
CSS书写规范、命名规范、网易CSS框架NEC的更多相关文章
- CSS书写及命名规范
1.样式书写顺序 positioning定位::position.display.float.top. right.bottom.left.overflow.clear.z-index: box mo ...
- html中css、div命名规范
html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- 再探CSS 中 class 命名规范
一直以来我的CSS 的 class命名都是比较随意,有时采用驼峰式.有时采用下划线,好像没有什么统一的标准,想到什么英文单词就拿过来用,这对于自己瞎写的小项目无伤大雅,遇到冲突的问题可稍加调整改变即可 ...
- CSS+DIV标签命名规范 搜索引擎最喜欢
搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则: 登录条:loginBar 标志:logo 侧栏:si ...
- css样式文件命名规范
样式文件命名规范 主要 master.css, style.css, main.css 布局 layout.css 专栏 columns.css 文字 font.css 打印 print.css 主题 ...
- css的一些命名规范
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- java入门---基础语法&基础常识&编码规范&命名规范
一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对 ...
- css基础(css书写 背景设置 标签分类 css特性)
css书写位置 行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...
- 关于CSS书写规范、顺序
关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...
- css书写顺序和常用命名推荐
写代码的时候有一个好的规范和顺序能够帮你节省很多时间.下文将推荐相关CSS书写顺序和规范的一些方法.这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们. CSS书写顺序 该代码来自 ...
随机推荐
- NIO与AIO,同步/异步,阻塞/非阻塞
1.flip(),compact(),与clear()的使用 flip()内部实现,先将limit设为当前位置,再将缓冲区的postion设为0,所以是为将缓冲区的数据写出到其它通道或者get()作准 ...
- ZBrush该如何通过结合KeyShot制作逼真玉佩
玉在中国的文明史上有着特殊的地位,古人的很多生活器具都是玉雕成的,能常戴在身上的惟有玉佩,古语有云"君子无故,玉不去身".即便到了现代,仍有很多人佩戴玉,倒不一定是因为它有多彰显地 ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- 贪吃蛇(Java实现)
程序效果: 代码: //Snake.java 1 package snake; import javax.swing.*; import java.awt.*; import java.awt.eve ...
- 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP
这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...
- UVA 11404 Palindromic Subsequence[DP LCS 打印]
UVA - 11404 Palindromic Subsequence 题意:一个字符串,删去0个或多个字符,输出字典序最小且最长的回文字符串 不要求路径区间DP都可以做 然而要字典序最小 倒过来求L ...
- BZOJ2748[HAOI2012]音量调节
Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开始之前他想要改 ...
- Nmap参数详解
转自:http://blog.csdn.net/huangwwu11/article/details/20230795 Nmap--networkmapper,网络探测工具和安全/端口扫描器 nmap ...
- testng 6.8.6 eclipse plugin
http://files.cnblogs.com/mikelij/testng.zip
- js鼠标事件大全
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...