当前位置 博文首页 > CSS的class与id常用的命名规则

    CSS的class与id常用的命名规则

    作者:吴迪软件开发 时间:2021-05-22 18:02

    网页公共命名:

    • #wrapper - - 页面外围控制整体布局宽度
    • #container或#content - - 容器,用于最外层
    • #layout - - 布局
    • #head,#header - - 页头部分
    • #foot,#footer - - 页脚部分
    • #nav - - 主导航
    • #subnav - - 二级导航
    • #menu - - 菜单
    • #submenu - - 子菜单
    • #sidebar - - 侧栏
    • #sidebar_a,#sidebar_b - - 左边栏或右边栏
    • #main - - 页面主体
    • #tag - - 标签
    • #msg,#message - - 提示信息
    • #tips - - 小技巧
    • #vote - - 投票
    • #friendlink - - 友情链接
    • #title - - 标题
    • #summary - - 摘要
    • #loginbar - - 登录条
    • #searchInput - - 搜索输入框
    • #hot - - 热门热点
    • #search - - 搜索
    • #search_output - - 搜索输出和搜索结果相似
    • #searchBar - - 搜索条
    • #search_results - - 搜索结果
    • #copyright - - 版权信息
    • #branding - - 商标
    • #logo - - 网站LOGO标志
    • #siteinfo - - 网站信息
    • #siteinfoLegal - - 法律声名
    • #siteinfoCredits - - 信誉
    • #joinus - - 加入我们
    • #partner - - 合作伙伴
    • #service - - 服务
    • #regsiter - - 注册
    • arr/arrow - - 箭头
    • #guild - - 指南
    • #sitemap - - 网站地图
    • #list - - 列表
    • #homeepage - - 首页
    • #subpage - - 二级页面子页面
    • #tool,#toolbar - - 工具条
    • #drop - - 下拉
    • #dorpmenu - - 下拉菜单
    • #status - - 状态
    • #scroll - - 滚动
    • .tab - - 标签页
    • .left,.right,.center - - 居中、左、右
    • .news - - 新闻
    • .download - - 下载
    • .banner - - 广告条(顶部广告条)
    • 电子贸易相关:
    • .products - - 产品
    • .products_prices - - 产品价格
    • .products_description - - 产品描述
    • .products_review - - 产品评论
    • .editor_review - - 编辑评论
    • .news_release - - 最新产品
    • .publisher - - 生产商
    • .screenshot - - 缩略图
    • .faqs - - 常见问题
    • .keyword - - 关键词
    • .blog - - 博客
    • .forum - - 论坛

    基础的命名:

    • 外套 wrap - - 用于最外层
    • 头部 header - - 用于头部
    • 主要内容 main - - 用于主体内容(中部)
    • 左侧 main-left - - 左侧布局
    • 右侧 main-right - - 右侧布局
    • 导航条 nav - - 网页菜单导航条
    • 内容 content - - 用于网页中部主体
    • 底部 footer - - 用于底部

    CSS文件命名:

    • master.css,style.css - - 主要的
    • module.css - - 模块
    • base.css - - 基本共用
    • layout.css - - 布局,版面
    • themes.css - - 主题
    • columns.css - - 专栏
    • font.css - - 文字、字体
    • forms.css - - 表单
    • mend.css - - 补丁
    • print.css - - 打印

    命名建议:

    无论是使用"."(小写句号)选择符开头命名,还是使用"#"(井号)选择符号开头命名,我们最后都遵循,主要的,重要的,特殊的,最外层的盒子用“#”(井号)选择符号开头命名,其他都用"."(小写句号)开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

    js