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选择器命名规则概述 根据W3C CSS2.1标准的4.1.3章节,选择器(包括元素名称、类名和ID)的命名需遵循以下规定: 1. **...
在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...
### CSS的常用命名规则 #### 一、概述 在CSS开发过程中,良好的命名习惯对于代码的可读性和维护性至关重要。本文将详细介绍三种常见的CSS命名方法:骆驼命名法、帕斯卡命名法以及匈牙利命名法,并结合具体的命名...
理解并熟练使用CSS选择器是编写高效CSS规则的关键。基本的选择器包括元素选择器、类选择器、ID选择器和组合选择器。此外,还可以使用属性选择器和伪类选择器来实现更复杂的样式需求。例如,使用a:link和a:hover来...
5. **性能优化**:合理利用CSS选择器的权重,避免使用通配符选择器(`*`)和过多的后代选择器,减少计算量。同时,可以使用CSS Sprite技术合并图片,减少HTTP请求。 6. **代码整洁**:遵循一定的代码格式,如缩进、...
CSS 命名规范是指在编写 CSS 代码时,遵守一定的命名规则,以便于代码的阅读、维护和重用。下面是一些常用的 CSS 命名规范: * 文件命名规范:global.css、layout.css、font.css、link.css、print.css 等 * 常用类/...
1. **大小写规则**:推荐使用小写字母来编写CSS选择器,这符合CSS标准且易于阅读。例如,`#header`、`.mainContent`。 2. **ID和类名**:ID通常以井号(#)开头,用于唯一标识页面上的特定元素,如`#container`。...
#### 连字符CSS选择器命名规范 1. **使用连字符**:建议使用中横线(如`-`)而非下划线(如`_`)来连接CSS选择器中的单词。这样做的好处在于: - 输入时减少了Shift键的使用次数; - 避免了浏览器兼容性问题...
2. CSS选择器命名规则: - 当需要连接多个单词时,推荐使用"_"而非驼峰式命名法。 - 正确示例:head_tit_ico。 - 错误示例:header_title_left_logo_icon。 - 如果命名需要超过四个层级,应适当缩写单词,以保持...
**CSS选择器是网页样式表语言CSS(Cascading Style Sheets)中的重要组成部分,用于匹配HTML或XML文档中的元素,从而应用相应的样式规则。本文将深入探讨CSS选择器的种类、用法及其在实际开发中的应用。** 首先,...
1. 常用名称:CSS选择器通常使用描述性名称,如header、content、footer、nav等,方便识别页面元素功能。 2. 小写字母和短横线:类和ID名全为小写字母,多词之间用短横线("-")连接,如"user-list"。 3. 结构化命名:...
遵循这些CSS命名规范和书写规则,不仅可以提高代码的可读性和可维护性,还能减少潜在的兼容性问题,提升网站的性能。同时,良好的命名习惯也有助于团队协作,让其他开发者更容易理解并参与到项目中。
5. **避免使用下划线**:在CSS选择器中不建议使用下划线(`_`),原因是输入时节省按键次数,以及解决浏览器兼容问题(例如,在IE6中,带下划线的选择器可能无效),同时便于与JavaScript变量名区分。 #### 三、CSS...
每个层级都有相应的命名规则,确保组件的可复用性和一致性。 5. 避免使用ID选择器:ID选择器具有高优先级,可能导致样式覆盖问题,应主要用在JavaScript中,而不是CSS。 6. 命名约定:使用小写字母和短横线(-)...
CSS手册提供了全面的CSS语法、选择器、布局技术、动画和过渡、响应式设计等内容。它详细阐述了如何通过CSS控制网页元素的样式,包括颜色、字体、布局、位置等,以及如何实现动态效果。5日精通CSS的学习计划可能涵盖...
- 每个ID在一个文档中应该是唯一的,以确保选择器的准确性。 - 例如:`唯一ID内容</div>`。 6. **图片元素的`alt`属性**: - `<img>`标签必须包含`alt`属性,以提供图片的替代文本。 - 这对于无障碍访问非常...