整理简单的统一CSS命名规则

一、CSS文件及样式命名
1、CSS文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
2、CSS样式命名规范
容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站标志：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　 题：title
内 容：content
列 表：list
当前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register
列 定 义：column_1of3 (三列中的 列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
二、id和class的使用及区别
ID方法：#iytang{color:#333333}，在页面中调用<div id="iytang">内容<div>
CLASS方法：.iytang{color:#333333}，在页面中调用<div class="ityang">内容<div>
id一个页面只可以使用一次，class可以多次引用。
我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？
页面存在多个相同的ID影响就是不能通过W3的校验，JS用到多个ID就会错误！
三.使用css缩写
1、margin:1em 0 2em 0.5em; 分别是外边距上、右、下、左；
2、边框：border:1px solid #000;，是border-width:1px;border-style:solid;border-color:#000;的缩写；
3、背景：background:#f00 url(background.gif) no-repeat fixed 0 0;
4、字体：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
5、列表：取消默认的圆点和序号可以这样写list-style:none;
四、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
五、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属 (attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释:
*内联样式(inline style)：元素的style属 ，比如 <div style="color:red;"></div> ,其中的color:red;就是行内样式
*ID选择符：元素的id属 ，比如 <div id="content"></div> 可以用ID选择符#content
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属 选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的 个单词。
六.多重CSS样式定义，属 追加重复最后优先原则
一个标签可以同时定义多个class，也可以是同一个class中重复定义属 。例如：
我们先定义两个样式
.one{width:200px;}
.two{border:10px solid #000;}
在页面代码中，我们可以这样调用:
<div class=one two></div>最后优先原则；
七.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
八、CSS hack
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
* html p {
declarations
}
(d)下面这个写法只有IE7浏览器可以理解(对其他浏览器都隐藏)
*+ html p {
}
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属 条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
<!--[if IE]>
<link rel=stylesheet type=text/css href="http://www.ebingou.cn/style/ie.css" />
<![endif]-->
还有更多的CSS hack大家可以通过网上找找，但是有很多hack都是不符合w3c标准的，本人根据以上的hack写了一个能区分IE6、IE7、FF的样式，而且可以符合w3c标准,代码如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
这样写后在IE6下宽是100px，IE7下是95px，火狐下是90px。

疯狂暗示打赏按钮

本文标签：

声明：本文由代码号注册/游客用户【何望】供稿发布，本站不对用户发布的整理简单的统一CSS命名规则信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：何望» https://www.ebingou.cn/dmh/11508.html

很赞哦！ ()