作为前端开发人,经常头疼于雷鸣,标签,id名的命名,不知道应该基于什么原则。

原则:

2 当命名的时候,问自己,这个元素是要来做什么?(根据使用目的).ad-banner

4 避免依靠位置和视觉效果命名。如.red-link #left-column

3 使用更加直观的命名。

虽然#header 有点用location来命名,但是这基本都遵守,比用#branding更加直观

如果我问 bob 这个类,id是做什么的,他是否会自动知道

好处:

当你一个right-cloumn想移到左侧时,就会引起混乱,如果用.sidebar 只需修改 .sidebar{ float:left }

常见命名

#header

#nav

#main-content, #secondary-content

#footer

分析Bootstrap:

为了制作不同的结构,涉及到结构化,如.btn-large .btn-small .span4

.dropdown-menu .btn-primary是语义化命名。

这其中又涉及到模块化,模块化势必会更加抽象,可能语义化就不一定好。

网友分析:

类名的半抽象化,对整个项目的模块化是很有必要的。标签才是语义化,类名是半抽象化。

更多资源:

一个各大网站命名统计 http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

css中标签,类名,id名的命名 语义化命名的更多相关文章

  1. 你应该了解的CSS语义化命名方式及常用命名规则

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  2. CSS语义化命名

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  3. HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  4. 平常我们是如何区分css中class和id之间有什么区别的?

    我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...

  5. java中创建对象 类名 对象名=new 类名(); 后面的()什么意思

    类名 对象名=new 类名();类名 对象名 这个的解释是创建名称为"对象名"的"类名"类引用变量new ; 这个的解释是实例化对象类名() 这个的解释是无参数 ...

  6. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  7. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  8. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. css中标签总结

    cursor CSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标cursor:pointer: 小手 cursor:wait:等待....很多种 <span contenteditable=&q ...

随机推荐

  1. demo记录

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  2. C# DataTable扩展方法

    在日常搬砖中,总结了一些简单的扩展方法. public static bool IsNullOrEmpty(this DataTable dt) { ; } public static bool Is ...

  3. 37.分组聚合操作—其他metric

    课程大纲     要学其他的metric(count,avg,max,min,sum) count:bucket,terms,自动就会有一个doc_count,就相当于是count avg:avg a ...

  4. Python爬虫基础--分布式爬取贝壳网房屋信息(Server)

    1. server_code01 2. server_code02 3. server_code03

  5. Linxu基础入门

    Linux命令大全:http://man.linuxde.net/ 创建目录 使用 mkdir 命令创建目录 mkdir $HOME/testFolder 切换目录 使用 cd 命令切换目录 cd $ ...

  6. 百度搜索引擎关键字URL采集爬虫优化行业定投方案高效获得行业流量-代码篇

    需要结合:<百度搜索引擎关键字URL采集爬虫优化行业定投方案高效获得行业流量--笔记篇> 一起看. #!/user/bin/env python # -*- coding:utf-8 -* ...

  7. 【hiho一下 第146周】子矩阵求和

    [题目链接]:http://hihocoder.com/contest/hiho146/problem/1 [题意] [题解] 设s[i][j]表示左上角的坐标为(i,j)的n*m的矩阵的和; 有s[ ...

  8. Java 注解之总结

    注解是Spring和Mybatis框架所大量使用的技术,要想掌握框架相关技术,注解是必须要掌握的. 掌握注解的优势: 1.能够读懂别人写的代码,特别是框架相关的代码. 2.本来可能需要很多配置文件,需 ...

  9. [ZJOI2010]Perm

    [ZJOI2010]Perm 题目 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少 ...

  10. [Cypress] Interact with Hidden Elements in a Cypress Test

    We often only show UI elements as a result of some user interaction. Cypress detects visibility and ...