CSS样式命名规则

命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下:

要注意的内容:

一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。

二,样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线()、减号(-)组成。 ID名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线()组成。

可使用类似下面的规则:

[模块前缀|类型|作用][名称][状态|位置]

约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。

例: 通用名词缩写 设置 set 成功 suc 提示 hint 操作 op 密码 pw 菜单 menu 按钮 bt 文本 tx 颜色 c 背景 bg 边框 bor 居中 center 图标 icon 弹出 pop

文本输入框 .input_tx 密码输入框 .input_pw 登录密码输入框 .input_pw_login 日志设置成功提示 .hint_suc_blogset 相册弹出的设置层 .pop_set_photo 公共提示 .hint_bg 文本颜色 .c_tx 段落文本颜色 .c_tx_p

时间: 2024-10-11 06:18:51

CSS样式命名规则的相关文章

有利于SEO的DIV+CSS的命名规则小结

由于项目中编写文档结构.编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范. 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 2.CSS样式命名规范 本人建议:用字母._号工.-号.数字组成,必须以字母开头,不能为纯数字.为了开发后样

有利于SEO优化的DIV+CSS的命名规则小结

一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css: 专栏样式:columns.css: 主题样式:themes.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: -------------------------------------------------- 页面主体:main: 内容:content: 标签页:tab: 文章列表:list: 提示信息:

CSS类名命名规则

CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航 #menu 菜单 #submenu 子菜单 #sideBar 侧栏 #sidebar_a, #sidebar_b 左边栏或右边栏 #main 页面主体 #tag 标签 #msg #message 提示信息 #tips

css命名规范—CSS样式命名整理

CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column中间内容:center 导航 导航:nav导航:mainbav/globalnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar边导航图标:sidebarIcon菜单:menu子菜单:submenu标题: t

CSS样式命名整理(非原创)

非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航 导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightside

css命名规范—CSS样式命名整理

CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column中间内容:center 导航 导航:nav导航:mainbav/globalnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar边导航图标:sidebarIcon菜单:menu子菜单:submenu标题: t

CSS规范 - 命名规则

使用类选择器,放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用. NEC特殊字符:"-"连字符 "-"在本规范中并不表示连字符的含义. 她只表示两种含义:分类前缀分隔符.扩展分隔符,详见以下具体规则. 分类的命名方法:使用单个字母+"-"为前缀 布局(grid)(.g-):模块(module)(.m-):元件(unit)(.u-):功能(function)(.f-):皮肤(skin)(.s-):状态(.z-)

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 页

你不知道的DIV+CSS的命名规则

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前比较好的CSS+DIV的命名规则 1DIV CLASS或者ID 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:t