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. 利用微信支付的订单查询接口可以在APP 中提高支付的可靠性

    最近公司有一个应用,用户可以在微信公众号上面下单,也可以在APP 中下单. 当用户在公共号上面下单时,微信支付成功可以返回微信支付单号,但是在APP 中用户微信支付时,个别时候会出现用户已经付款成功, ...

  2. 2018-2019-2 20165312《网络攻防技术》Exp4 恶意代码分析

    2018-2019-2 20165312<网络攻防技术>Exp4 恶意代码分析 知识点总结 1.有关schtasks schtacks的作用:安排命令和程序定期运行或在指定时间内运行.从计 ...

  3. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  4. JAVA相关技术

    开发服务器环境: 1.Linux系统 CentOS 6.5\7 2.JDK1.8 3.tomcat 9 4.mysql 5.7 开发环境: 1.开发集成工具:idea 2.构建工具maven 仓库暂时 ...

  5. this 的指向

    使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:哪个对象调用函数,函数里面的this指向哪个对象. 下面 ...

  6. Laravel发送邮箱消息验证

    945的密码:umywcvkrfrytfeef ENV的配置如下: MAIL_DRIVER=smtpMAIL_HOST=smtp.qq.comMAIL_PORT=25MAIL_USERNAME=XXX ...

  7. [转]Python 的列表解析式,集合解析式,字典解析式

    Python 的列表解析式,集合解析式,字典解析式 这三种都是 python 里面的语法糖. 语法糖,Syntactic Sugar,就是为了写程序时候少出错,发明的一些简便的方法,但不影响这个语法的 ...

  8. Vim常用配置

    mkdir -p ~/.vim/bundle/Vundle.vim git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/V ...

  9. Jmeter5.1.1+python调用python脚本

    1.下载jython https://www.jython.org/downloads.html 下载Download Jython 2.7.0 - Standalone Jar : For embe ...

  10. JavaScript:鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...