zoukankan      html  css  js  c++  java
  • CSS规范

    最佳选择器写法(模块)

    /* 这是某个模块 */
    .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-)
    语义命名简写
    文档 doc doc
    头部 head hd
    主体 body bd
    尾部 foot ft
    主栏 main mn
    主栏子容器 mainc mnc
    侧栏 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
  • 相关阅读:
    git修改远程仓库地址
    Result Maps collection already contains value for com.miniprogram.meirong.user.dao.UserMapper.BaseResultMap
    查看微信小程序的appID和secret
    Springboot配置fastjson开发
    本地仓库上传码云
    总结分析Java常见的四种引用
    equals和hashcode 和 ==方法说明
    关于Class.forName(className).newInstance()介绍
    Java枚举
    抽象工厂模式-与-工厂方法模式区别
  • 原文地址:https://www.cnblogs.com/LoveOrHate/p/4448894.html
Copyright © 2011-2022 走看看