CSS选择器命名及常用命名

CSS选择器命名及常用命名
规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)!
  说个题外话,规范化命名的代码,会显着你更加专业!
 
  关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。看他们的名字挺不好理解的,不要被吓到了,其实很容易,不信的话继续往下看~
 
  【骆驼命名法】
  说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要这样一高一低,怎举才能这样,就用大小写字母呗~,大写的英文就相当于骆驼背部的凸起,小写的就是凹下去的地方了,但是这个也是有规则的,就是第一个字母要小写,后面的词的第一个字母就要用大写,如下:
  #headerBlock
  如果第二个单词后面还有单词呢?那就是下面这种情况,
  .navMenuRedButton
  也就是说,无论几个单词凑一块,后面所有单词癿首字母都要大写。
 
  【帕斯卡命名法】
  这种命名法同样也是大小写字母混编而成,和骆驼命名法很像,但和骆驼命名法有一点区别,就是所有单词的首字母都要大写,当然也包括第一个单词,如下:
  #HeaderBlock
  .NavMenuRedButton
  题外话,如果说“骆驼命名法”是单峰驼的话,那么“帕斯卡命名法”就是双峰驼了~
 
  【匈牙利命名法】
  匈牙利命名法,是需要在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认,更容易理解,比如:
  #head_navigation
  .red_navMenuButton
 
  以上三种,前两种(骆驼命名法、帕斯卡命名法)在命名CSS选择器的时候比较常用,当然这三种命名法可以混合使用,另需要遵守一个原则“容易理解,方便协同工作”就OK了,或者说”即使不懂代码的人看了代码也知道这块起什么作用”,没有必要强调是那种命名法,根据个人喜好使用就行。
页面模块的常用命名
头:header 导航:nav 菜单:menu 友情链接:friendlink
页面外围包裹:wrapper 子导航:subnav 子菜单:submenu 下载:download
页面主体:main 广告:banner 侧栏:sidebar 小技巧:tips
内容:content 标志:logo 栏目:column 滚动:scroll
页脚:footer 搜索:search 热点:hot 上一个:prev
版权:copyright 登录条:loginbar 新闻:news 下一个:next
 

CSS选择器命名及常用命名的更多相关文章

  1. css书写顺序和常用命名推荐

    写代码的时候有一个好的规范和顺序能够帮你节省很多时间.下文将推荐相关CSS书写顺序和规范的一些方法.这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们. CSS书写顺序 该代码来自 ...

  2. HTML常用命名和CSS reset代码【收集总结】

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  3. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  4. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  5. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  6. CSS 常用命名

    在前端开发中,规范使用 DIV+CSS 命名,可以增强团队合作提高开发效率,有利于页面后期的维护和优化. 1.页面结构 wrap:外套.包裹,用于最外层. wrapper:外套,用于页面外围控制整体布 ...

  7. HTML和CSS标签常用命名规则

    1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存放所有临时图片和其它文件: ...

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

    文件夹主要建立以下文件夹: 1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存 ...

  9. web前端开发企业级CSS常用命名,书写规范总结

    1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...

随机推荐

  1. python之路——24

    复习 1.面向对象编程 思想:角色的抽象,创建类,实例化,操作实例2.面向对象的关键字 1.类的静态属性,存储在类的命名空间 2.类名.方法(对象),对象.方法 3.对象可以使用静态变量:类不可以使用 ...

  2. dp练习--

    动态规划(DP)算法     动态规划是运筹学的一个分支,是求解决策过程最优化的数学方法.利用各个阶段之间的关系,逐个求解,最终求得全局最优解,需要确认原问题与子问题.动态规划状态.边界状态.边界状态 ...

  3. Git操作相关记录

    1. 本地更新fork来的项目,与原项目同步更新 git remote add upstream <origin_repo_addr> git remote -v git fetch up ...

  4. Scrapy CrawlSpider源码分析

    crawl.py中主要包含两个类: 1. CrawlSpider 2. Rule link_extractor:传LinkExtractor实例对象 callback:传”func_name“ cb_ ...

  5. 使用Git Bash从Git上下载代码到本地以及上传代码到码云Git

    前提是在码云上已经新建一个空的项目,可参考:https://www.cnblogs.com/babysbreath/p/9170455.html 1.新建一个目录,存放下载下来的项目,我在D盘新建了一 ...

  6. Android学习笔记一之第一个Android程序

    /** *Title:总结昨天下午至今天上午的学习成果 *Author:zsg *Date:2017-8-13 / 一.了解Android 1.Android架构 Android大致可分为四层架构:L ...

  7. C# HtmlAgilityPack 爬虫框架

    这两天公司不是很忙,在某个网站看见别人爬虫出来的数据感觉很有兴趣就玩了一把,网上找了一个 HtmlAgilityPack 爬虫框架,用了一下感觉很不错 首先从Nuget上面更新Package:Html ...

  8. Linux修改hostname与免密码登录

    修改hostname [root@centos7 ~]$ hostnamectl set-hostname hadoop001 # 使用这个命令会立即生效且重启也生效 [root@centos7 ~] ...

  9. Spring MVC参数封装传递

    在Spring MVC中,前端JSP页面可以传递  基本类型(int,String).实体类型.包装类型.数组类型.集合类型(List.map )等. 假如在传递的类型中有 Date类型的字段,需要在 ...

  10. react源码第一天

    1.下载源码:github 16.7版本 2.找到笔记:https://react.jokcy.me/book/api/react.html#