CSS命名规范(规则)常用的CSS命名规则

标签: css 命名规范
9人阅读 评论(0) 收藏 举报
分类:

CSS命名规范(规则)常用的CSS命名规则

  1. 基本内容
    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体佈局宽度:wrapper
    左右中:left right center
    登录条:loginbar
    标志:logo
    广告:banner
    页面主体:main
    热点:hot
    新闻:news
    下载:download
    子导航:subnav
    菜单:menu
    子菜单:submenu
    搜索:search
    友情链接:friendlink
    页脚:footer
    版权:copyright
    滚动:scroll
    内容:content
    标签:tags
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    加入:joinus
    指南:guide
    服务:service
    注册:regsiter
    状态:status
    投票:vote
    合作伙伴:partner
  2. 注释的写法: /* Header */
    内容区 /* End Header */
    Id的命名:

    1. 页面结构 
      容器: container
      页头:header
      内容:content/container
      页面主体:main
      页尾:footer
      导航:nav
      侧栏:sidebar
      栏目:column
      页面外围控制整体佈局宽度:wrapper
      左右中:left right center

    2. 导航 
      导航:nav
      主导航:mainnav
      子导航:subnav
      顶导航:topnav
      边导航:sidebar
      左导航:leftsidebar
      右导航:rightsidebar
      菜单:menu
      子菜单:submenu
      标题: title
      摘要: summary

    3. 功能 
      标志:logo 
      广告:banner
      登陆:login
      登录条:loginbar
      注册:register
      搜索:search
      功能区:shop
      标题:title
      加入:joinus
      状态:status
      按钮:btn
      滚动:scroll
      标签页:tab
      文章列表:list
      提示信息:msg
      当前的: current
      小技巧:tips
      图标: icon
      注释:note
      指南:guild
      服务:service
      热点:hot
      新闻:news
      下载:download
      投票:vote
      合作伙伴:partner
      友情链接:link
      版权:copyright

注意事项:

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词。

CSS样式表文件命名:

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

查看评论

css系统学习篇

本系列课程从0开始系统地讲解css。如果你是前端新手,不知从何下手学习,那么可以认真学习本系列课程。学完之后基本常用的css属性你都能够有所了解,再搭配上适当的代码练习,很快就能做出漂亮的网页效果。
  • 2016年04月24日 15:33

css和js的命名规范

笔者在撸代码是也会遇到不知道给元素或变量起什么名字的问题,中文拼音太俗气,随便敲几个字母又影响代码的查读性。于是总结这些命名规范。有些资料来源于网络            一 .css命名规范 ...
  • Webgongcheng
  • Webgongcheng
  • 2016-08-12 08:59:24
  • 4746

CSS 中 id 与 class 命名规则及编码的 6 个最佳习惯

CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下CSS中id与class命名及编码的6个最佳习惯,相信本文介绍一定会让你有所收获。 一、用class_name方式写类名 以前喜欢...
  • holmes89757
  • holmes89757
  • 2016-06-17 16:42:49
  • 6644

史上最全的HTML和CSS标签常用命名规则

文件夹主要建立以下文件夹:   1、Images 存放一些网站常用的图片;   2、Css 存放一些CSS文件;   3、Flash 存放一些Flash文件;   4、PSD 存放一些PSD源...
  • shadow_zed
  • shadow_zed
  • 2017-05-31 14:27:07
  • 927

CSS命名规范——BEM思想(非常赞的规范)

特别声明:此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译,整个译文带有我们...
  • chenmoquan
  • chenmoquan
  • 2013-12-03 14:35:49
  • 10302

CSS文件和样式命名规范,仅供参考

一、CSS文件及样式命名 1、CSS文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样...
  • riyuedangkong1
  • riyuedangkong1
  • 2017-06-20 09:07:54
  • 1166

前端开发规范之命名规范、html规范、css规范、js规范

在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也...
  • An1090239782
  • An1090239782
  • 2017-06-23 11:28:16
  • 3693

从腾讯layoutLeft/layoutRight 小谈CSS样式命名

零、说在前面的话 在firebug里看腾讯首页,有这样的层:     要是哪天产品经理或策划说:小李子,这个左边的放在右边是不是更好点?还有这个上下结构能不能再高点? 虽然有...
  • xianghongai
  • xianghongai
  • 2014-08-20 15:55:32
  • 1126

div+CSS ID的命名规范和习惯

大家都知道规范的css命名可以增强样式规则的可读性,便于后来你或别人对页面的修改。起初我写css规则的时候,用汉语的缩写来命名,现在看来是很不专业的,也给我的后期维护浪费精力。 根据自己的而写法...
  • qq_27084325
  • qq_27084325
  • 2016-07-15 13:13:13
  • 1326

CSS选择器命名规则

导语:在实际项目中,因为参与人员个人习惯不一样,导致写出的CSS选择器命名千奇百怪,对项目维护运营、内部技术沟通均产生了不利影响。因此在项目实施前,网页重构人员有必要统一CSS选择器命名规则,以期将更...
  • gebitan505
  • gebitan505
  • 2014-06-09 10:13:42
  • 2028
    个人资料
    持之以恒
    等级:
    访问量: 707
    积分: 365
    排名: 20万+
    文章存档