CSS规范 - 最佳实践

发布时间:2019-10-22 18:39:26 浏览量:902 标签: 开发 规范

  • 最佳选择器写法(模块)

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /* 这是某个模块 */
    .m-nav{}/* 模块容器 */
    .m-nav li,.m-nav a{}/* 先共性  优化组合 */
    .m-nav li{}/* 后个性  语义化标签选择器 */
    .m-nav a{}/* 后个性中的共性 按结构顺序 */
    .m-nav a.a1{}/* 后个性中的个性 */
    .m-nav a.a2{}/* 后个性中的个性 */
    .m-nav .z-crt a{}/* 交互状态变化 */
    .m-nav .z-crt a.a1{}
    .m-nav .z-crt a.a2{}
    .m-nav .btn{}/* 典型后代选择器 */
    .m-nav .btn-1{}/* 典型后代选择器扩展 */
    .m-nav .btn-dis{}/* 典型后代选择器扩展(状态) */
    .m-nav .btn.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */
    .m-nav .m-sch{}/* 控制内部其他模块位置 */
    .m-nav .u-sel{}/* 控制内部其他元件位置 */
    .m-nav-1{}/* 模块扩展 */
    .m-nav-1 li{}
    .m-nav-dis{}/* 模块扩展(状态) */
    .m-nav.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */
  • 统一语义理解和命名

  • 布局(.g-)
    语义命名简写
    文档docdoc
    头部headhd
    主体bodybd
    尾部footft
    主栏mainmn
    主栏子容器maincmnc
    侧栏sidesd
    侧栏子容器sidecsdc
    盒容器wrap/boxwrap/box
    模块(.m-)、元件(.u-)
    语义命名简写
    导航navnav
    子导航subnavsnav
    面包屑crumbcrm
    菜单menumenu
    选项卡tabtab
    标题区head/titlehd/tt
    内容区body/contentbd/ct
    列表listlst
    表格tabletb
    表单formfm
    热点hothot
    排行toptop
    登录loginlog
    标志logologo
    广告advertisead
    搜索searchsch
    幻灯slidesld
    提示tipstips
    帮助helphelp
    新闻newsnews
    下载downloaddld
    注册registreg
    投票votevote
    版权copyrightcprt
    结果resultrst
    标题titlett
    按钮buttonbtn
    输入inputipt
    功能(.f-)
    语义命名简写
    浮动清除clearbothcb
    向左浮动floatleftfl
    向右浮动floatrightfr
    内联块级inlineblockib
    文本居中textaligncentertac
    文本居右textalignrighttar
    文本居左textalignlefttal
    垂直居中verticalalignmiddlevam
    溢出隐藏overflowhiddenoh
    完全消失displaynonedn
    字体大小fontsizefs
    字体粗细fontweightfw
    皮肤(.s-)
    语义命名简写
    字体颜色fontcolorfc
    背景backgroundbg
    背景颜色backgroundcolorbgc
    背景图片backgroundimagebgi
    背景定位backgroundpositionbgp
    边框颜色bordercolorbdc
    状态(.z-)
    语义命名简写
    选中selectedsel
    当前currentcrt
    显示showshow
    隐藏hidehide
    打开openopen
    关闭closeclose
    出错errorerr
    不可用disableddis

以上内容转载自NEC,地址:http://nec.netease.com



评论
登录后才可以进行评论哦! QQ登录
验证码
评论内容