NEC CSS命名规则

Unsplash
  • 重置 reset 和默认 base:消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动
  • 统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式
  • 布局 grid (.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等
  • 模块 module (.m-):通常是一个语义化的可以重复使用的较大的整体,比如导航、登录、注册、各种列表、评论、搜索等
  • 元件 unit (.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中,比如按钮、输入框、loading、图标等
  • 功能 function (.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等,不可滥用
  • 皮肤 skin (.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色,非换肤型网站不可滥用此类
  • 状态 .z-:为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{})

布局 grid (.g-)

语义

命名

简写

文档

doc

doc

头部

head

hd

主体

body

bd

尾部

foot

ft

主栏

main

mn

主栏子容器

mainc

mnc

侧栏

side

sd

侧栏子容器

sidec

sdc

盒容器

wrap/box

wrap/box

模块 module (.m-), unit (.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

功能 function (.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

皮肤 skin (.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