• CSS命名规范 云柯


    简介
    CSS命名由小写的英文单词或组合命名,单词与单词之间通过“-”连接,常用的CSS命名规范有文本命名规范,页面结构命名规范,导航命名以及功能命名等。

    CSS 命名一般采用小写英文单词或组合命名,单词与单词之间以"-"分割,而且英文单词不缩写,除非是那种简单一眼看上去就能明白的单词。接下来在文章中分享一些CSS中常用的命名规范,希望对大家有所帮助
    文本命名规范
    index.css: 一般用于首页建立样式
    head.css: 头部样式,当多个页面头部设计风格相同时使用。
    base.css: 共用样式。
    style.css:独立页面所使用的样式文件。
    global.css:页面样式基础,全局公用样式,页面中必须包含。
    layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
    module.css:模块,用于产品类页,也可与其它样式配合使用。
    master.css:主要的样式表
    columns.css:专栏样式
    themes.css:主体样式
    forms.css:表单样式
    mend.css:补丁,基于以上样式进行的私有化修补。
    页面结构命名:
    page:代表整个页面,用于最外层。
    wrap:外套,将所有元素包在一起的一个外围包,用于最外层
    wrapper:页面外围控制整体布局宽度,用于最外层
    container:一个整体容器,用于最外层
    head,header:页头区域,用于头部
    nav: 导航条
    content:内容,网站中最重要的内容区域,用于网页中部主体
    main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
    column:栏目
    sidebar:侧栏
    foot,footer:页尾、页脚。网站一些附加信息放置区域,(或命名为 copyright)用于底部
    导航命名:
    nav, navbar, navigation, nav-wrapper:导航条或导航包,代表横向导航
    topnav:顶部导航
    mainbav:主导航
    subnav:子导航
    sidebar:边导航
    leftsidebar 或 sidebar_a:左导航
    rightsidebar 或 sidebar_b:右导航
    title:标题
    summary:摘要
    menu:菜单,区域包含一般的链接和菜单
    submenu:子菜单
    drop:下拉
    dorpmenu:下拉菜单
    links:链接菜单
    功能命名:
    logo:标记网站logo标志
    banner:标语、广告条、顶部广告条
    login:登陆,(例如登录表单:form-login)
    loginbar:登录条
    register:注册
    tool, toolbar:工具条
    search:搜索
    searchbar:搜索条
    searchlnput:搜索输入框
    shop:功能区,表示现在的
    icon:小图标
    label:商标
    homepage:首页
    subpage:二级页面子页面
    hot:热门热点
    list:文章列表,(例如:新闻列表:list-news)
    scroll:滚动
    tab:标签
    sitemap:网站地图
    msg 或 message:提示信息
    current:当前的
    joinus:加入
    status:状态
    btn:按钮,(例如:搜索按钮可写成:btn-search)
    tips:小技巧
    note:注释
    guild:指南
    arr, arrow:标记箭头
    service:服务
    breadcrumb:(即页面所处位置导航提示)
    download:下载
    vote:投票
    siteinfo:网站信息
    partner:合作伙伴
    link, friendlink:友情链接
    copyright:版权信息
    siteinfoCredits:信誉
    siteinfoLegal:法律信息

  • 相关阅读:
    使用python-docx生成Word文档
    python 日期格式转换
    Android开发:关于WebView
    用 jQuery.ajaxSetup 实现对请求和响应数据的过滤
    Mysql 命令大全
    旋转木马的小效果!
    CSS3 background-image背景图片相关介绍
    PHP的高效IOC框架——CanoeDI
    CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
    PHP入门介绍与环境配置
  • 原文地址:https://www.cnblogs.com/yunke/p/13061715.html
Copyright © 2020-2023  润新知