css中标签,类名,id名的命名 语义化命名
作为前端开发人,经常头疼于雷鸣,标签,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名的命名 语义化命名的更多相关文章
- 你应该了解的CSS语义化命名方式及常用命名规则
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- CSS语义化命名
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 平常我们是如何区分css中class和id之间有什么区别的?
我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...
- java中创建对象 类名 对象名=new 类名(); 后面的()什么意思
类名 对象名=new 类名();类名 对象名 这个的解释是创建名称为"对象名"的"类名"类引用变量new ; 这个的解释是实例化对象类名() 这个的解释是无参数 ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- DIV+CSS中标签dl dt dd常用的用法
转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- css中标签总结
cursor CSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标cursor:pointer: 小手 cursor:wait:等待....很多种 <span contenteditable=&q ...
随机推荐
- demo记录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
- C# DataTable扩展方法
在日常搬砖中,总结了一些简单的扩展方法. public static bool IsNullOrEmpty(this DataTable dt) { ; } public static bool Is ...
- 37.分组聚合操作—其他metric
课程大纲 要学其他的metric(count,avg,max,min,sum) count:bucket,terms,自动就会有一个doc_count,就相当于是count avg:avg a ...
- Python爬虫基础--分布式爬取贝壳网房屋信息(Server)
1. server_code01 2. server_code02 3. server_code03
- Linxu基础入门
Linux命令大全:http://man.linuxde.net/ 创建目录 使用 mkdir 命令创建目录 mkdir $HOME/testFolder 切换目录 使用 cd 命令切换目录 cd $ ...
- 百度搜索引擎关键字URL采集爬虫优化行业定投方案高效获得行业流量-代码篇
需要结合:<百度搜索引擎关键字URL采集爬虫优化行业定投方案高效获得行业流量--笔记篇> 一起看. #!/user/bin/env python # -*- coding:utf-8 -* ...
- 【hiho一下 第146周】子矩阵求和
[题目链接]:http://hihocoder.com/contest/hiho146/problem/1 [题意] [题解] 设s[i][j]表示左上角的坐标为(i,j)的n*m的矩阵的和; 有s[ ...
- Java 注解之总结
注解是Spring和Mybatis框架所大量使用的技术,要想掌握框架相关技术,注解是必须要掌握的. 掌握注解的优势: 1.能够读懂别人写的代码,特别是框架相关的代码. 2.本来可能需要很多配置文件,需 ...
- [ZJOI2010]Perm
[ZJOI2010]Perm 题目 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少 ...
- [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 ...