CSS书写规范、命名规范、网易CSS框架NEC

时间:2021-09-02 06:35:24

网易CSS框架NEC:http://nec.netease.com/

NEC框架的CSS规范: 

CSS规范 - 分类方法

CSS规范 - 命名规则

CSS规范 - 代码格式

CSS规范 - 优化方案

CSS规范 - 最佳实践

CSS规范 - 典型错误

NEC - 代码库

NEC - 案例


统一语义理解和命名

布局(.g-)
语义 命名 简写
文档 doc doc
头部 head hd
主体 body bd
尾部 foot ft
主栏 main mn
主栏子容器 mainc mnc ( c 表示 child )
侧栏 side sd
侧栏子容器 sidec sdc
盒容器 wrap/box wrap/box
模块(.m-)、元件(.u-)
语义 命名 简写
导航 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
功能(.f-)
语义 命名 简写
浮动清除 clearboth cb
向左浮动 floatleft fl
向右浮动 floatright fr
内联块级 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fs
字体粗细 fontweight fw
皮肤(.s-)
语义 命名 简写
字体颜色 fontcolor fc
背景 background bg
背景颜色 backgroundcolor bgc
背景图片 backgroundimage bgi
背景定位 backgroundposition bgp
边框颜色 bordercolor bdc
状态(.z-)
语义 命名 简写
选中 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)
*/


推荐大家使用的CSS书写规范、顺序

关于团队合作的css命名规范

(推荐)页面部件库整理

page -> grid(网格/布局) -> module(模块) -> widget(组件) -> unit(元件) -> figure(图形,比如说某个按钮)