作为前端开发人,经常头疼于雷鸣,标签,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. Java中“==”、“compareTo()”和“equals()”的区别

    在比较两个对象或者数据大小的时候,经常会用到==.compareTo()和equals(),尤其是在接入了Comparable接口后重写compareTo方法等场景,所以我们来理一下这三个的区别. 1 ...

  2. https://github.com/MediaTek-Labs/linkit-smart-7688-feed编译失败

    mkdir -p /home/fly/workdir/LinkltSmart7688Duo-20170626/openwrt/dl/home/fly/workdir/LinkltSmart7688Du ...

  3. springcloud(七): 使用Feign调用Eureka Server客户端服务

    当我们通过RestTemplate调用其它服务的API时,所需要的参数须在请求的URL中进行拼接,如果参数少的话或许我们还可以忍受,一旦有多个参数的话,这时拼接请求字符串就会效率低下,并且显得好傻. ...

  4. 【codeforces 764D】Timofey and rectangles

    [题目链接]:http://codeforces.com/contest/764/problem/D [题意] 给你n个矩形,以左下角坐标和右上角坐标的形式给出; (保证矩形的边长为奇数) 问你有没有 ...

  5. Master Nginx(7) - Nginx for the Developer

    Caching integration No application caching Caching in the database Caching in the filesystem Changin ...

  6. noip模拟赛 同余方程组

    分析:这道题一个一个枚举都能有70分...... 前60分可以用中国剩余定理搞一搞.然而并没有枚举分数高......考虑怎么省去不必要的枚举,每次跳都只跳a的倍数,这样对前面的式子没有影响,为了使得这 ...

  7. asp.net--解决上传文件大小限制

    原文地址 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大 ...

  8. [bzoj2850]巧克力王国_KD-Tree

    巧克力王国 bzoj-2850 题目大意:给出n块巧克力,每块巧克力都有自己的两个参数x和y和本身的价值val,询问:m个人,每个人有两个系数和一个限度a,b,和c.求所有ax+by<=c的巧克 ...

  9. Spring MVC-表单(Form)标签-隐藏字段(Hidden Field)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_hidden.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  10. not in 和 <> 不走索引

    首先我们要知道的一点就是CBO的代码oracle是不会对我们公开的,起码现在是.所以本文中的结论不一定适用所有的版本.在应用本文的结论之前最好先试一下. ok 下面就是本文的结论,当你在where语句 ...