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. c#委托之浅析

    前言: 这章我们将弄懂,委托是什么?有什么作用?在什么样的场景下可以启到什么作用? 委托适用的场景:当确定处理一个任务时,不确定其处理任务的方法时可使用,这样可以提高扩展性,调用符合条件的处理方法,避 ...

  2. 2018-2019-20175334实验一《Java开发环境的熟悉》实验报告

    2018-2019-20175334实验一<Java开发环境的熟悉>实验报告 一.实验内容及步骤 实验一Java开发环境的熟悉-1 建立"自己学号exp1"的目录 在& ...

  3. 7.6 chcount.c -- 使用逻辑与运算符

    include <stdio.h> #define PERIOD '.' int main(void) { char ch; int charcount = 0; while ((ch = ...

  4. python 简单图像识别--验证码

    python  简单图像识别--验证码 记录下,准备工作安装过程很是麻烦. 首先库:pytesseract,image,tesseract,PIL windows安装PIL,直接exe进行安装更方便( ...

  5. MySQL查询语句报错 sql_mode=only_full_group_by 问题

    升级MySQL到5.7后,查询语句总是报sql_mode=only_full_group_by问题,总结归纳了两种解决方案,推存第二种解决方案. 报错信息: [Err] 1055 - Expressi ...

  6. php对函数的引用

    function &example($tmp=0){                  //定义一个函数,别忘了加“&”符     return $tmp;              ...

  7. To be taught if i am fortunate

    此博客算是我自娱自乐的海洋球池吧. 由于我十分的菜并且文笔拙劣,所以您可能并不能在这找到什么有用的信息或者好玩的东西(或者exciting的内容). 如果您能指出我的一些错误,我将十分感激.

  8. Python数据类型的内置函数之list(列表)

    Python数据类型内置函数 - str(字符串) - list(列表) - tuple(元组) - dict(字典) - set(收集) list(列表)的操作 - (append)在列表最后追加指 ...

  9. C语言博客作业5--指针

    C语言博客作业5--指针 1.本章学习总结(2分) 1.1思维导图 请以思维导图总结本周的学习内容,如下图所示: 1.2本章学习体会及代码量学习体会 1.2.1学习体会 描述本周学习感受,也可以在这里 ...

  10. Centos6、7下安装Nginx的两种方法

    一,通过yum命令安装 1.操作系统版本的确认很重要,因为下一步我们要依靠这个来创建yum源文件 2.创建 nginx.repo vi /etc/yum.repos.d/nginx.repo 文件内容 ...