`

Css选择器命名规则

 
阅读更多
1.经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式..

2.W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_);它们不能以 数字,或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。

3.在W3C CSS2.1说明文档中,只提到选择器标识符不能以数字,或一个连字号后跟数字为开头。除 此之外,没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢?

以数字开始的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被识别,而其它浏览器下则不识别(忽略该规则)

4.坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。

5.关于团队合作的css命名规范
常用的css命名规则

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css



分享到:
评论

相关推荐

    CSS 选择器命名规范化

    好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。 【骆驼命名法】 说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要...

    CSS命名规则

    本文将根据给定的内容深入探讨CSS选择器命名规则及其在实际应用中的注意事项。 #### 二、CSS选择器命名规则概述 根据W3C CSS2.1标准的4.1.3章节,选择器(包括元素名称、类名和ID)的命名需遵循以下规定: 1. **...

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    css的常用命名规则

    ### CSS的常用命名规则 #### 一、概述 在CSS开发过程中,良好的命名习惯对于代码的可读性和维护性至关重要。本文将详细介绍三种常见的CSS命名方法:骆驼命名法、帕斯卡命名法以及匈牙利命名法,并结合具体的命名...

    超详细CSS语义化命名规则及一些总结和扩展

    理解并熟练使用CSS选择器是编写高效CSS规则的关键。基本的选择器包括元素选择器、类选择器、ID选择器和组合选择器。此外,还可以使用属性选择器和伪类选择器来实现更复杂的样式需求。例如,使用a:link和a:hover来...

    web前端+css命名 规范

    5. **性能优化**:合理利用CSS选择器的权重,避免使用通配符选择器(`*`)和过多的后代选择器,减少计算量。同时,可以使用CSS Sprite技术合并图片,减少HTTP请求。 6. **代码整洁**:遵循一定的代码格式,如缩进、...

    CSS命名规范CSS命名规范

    CSS 命名规范是指在编写 CSS 代码时,遵守一定的命名规则,以便于代码的阅读、维护和重用。下面是一些常用的 CSS 命名规范: * 文件命名规范:global.css、layout.css、font.css、link.css、print.css 等 * 常用类/...

    CSS命名规范(个人总结)

    1. **大小写规则**:推荐使用小写字母来编写CSS选择器,这符合CSS标准且易于阅读。例如,`#header`、`.mainContent`。 2. **ID和类名**:ID通常以井号(#)开头,用于唯一标识页面上的特定元素,如`#container`。...

    如何规范css的命名和书写

    #### 连字符CSS选择器命名规范 1. **使用连字符**:建议使用中横线(如`-`)而非下划线(如`_`)来连接CSS选择器中的单词。这样做的好处在于: - 输入时减少了Shift键的使用次数; - 避免了浏览器兼容性问题...

    编程规范-HTML + CSS 命名规范.pdf

    2. CSS选择器命名规则: - 当需要连接多个单词时,推荐使用"_"而非驼峰式命名法。 - 正确示例:head_tit_ico。 - 错误示例:header_title_left_logo_icon。 - 如果命名需要超过四个层级,应适当缩写单词,以保持...

    css选择器介绍

    **CSS选择器是网页样式表语言CSS(Cascading Style Sheets)中的重要组成部分,用于匹配HTML或XML文档中的元素,从而应用相应的样式规则。本文将深入探讨CSS选择器的种类、用法及其在实际开发中的应用。** 首先,...

    HTML_CSS_JavaScript命名规范

    1. 常用名称:CSS选择器通常使用描述性名称,如header、content、footer、nav等,方便识别页面元素功能。 2. 小写字母和短横线:类和ID名全为小写字母,多词之间用短横线("-")连接,如"user-list"。 3. 结构化命名:...

    css命名规范

    遵循这些CSS命名规范和书写规则,不仅可以提高代码的可读性和可维护性,还能减少潜在的兼容性问题,提升网站的性能。同时,良好的命名习惯也有助于团队协作,让其他开发者更容易理解并参与到项目中。

    CSS属性编写顺序及命名规范

    5. **避免使用下划线**:在CSS选择器中不建议使用下划线(`_`),原因是输入时节省按键次数,以及解决浏览器兼容问题(例如,在IE6中,带下划线的选择器可能无效),同时便于与JavaScript变量名区分。 #### 三、CSS...

    CSS_命名规范参考及书写注意事项.rar

    每个层级都有相应的命名规则,确保组件的可复用性和一致性。 5. 避免使用ID选择器:ID选择器具有高优先级,可能导致样式覆盖问题,应主要用在JavaScript中,而不是CSS。 6. 命名约定:使用小写字母和短横线(-)...

    css&html手册及命名规则等

    CSS手册提供了全面的CSS语法、选择器、布局技术、动画和过渡、响应式设计等内容。它详细阐述了如何通过CSS控制网页元素的样式,包括颜色、字体、布局、位置等,以及如何实现动态效果。5日精通CSS的学习计划可能涵盖...

    DIV+CSS规范命名大全集合

    - 每个ID在一个文档中应该是唯一的,以确保选择器的准确性。 - 例如:`唯一ID内容</div>`。 6. **图片元素的`alt`属性**: - `<img>`标签必须包含`alt`属性,以提供图片的替代文本。 - 这对于无障碍访问非常...

Global site tag (gtag.js) - Google Analytics