CSS命名规范

规范

1、对于非通用样式,在样式比较简单的前提下,尽量使用面向属性的命名方式,如多使用pb20、ml20这种写法。
2、对于通用样式,尽量不要使用分离方式。因为不便修改。
3、三无原则:

  • 无ID,如#test,ID一般与业务有关
  • 无层级,如.test span,这种写法一是重用性低,二是会影响渲染效率
  • 无标签,ul.test同上。

CSS样式命名

网页公共命名

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

  • container或#content 容器,用于最外层

  • layout 布局

  • head, #header 页头部分

  • foot, #footer 页脚部分

  • nav 主导航

  • subnav 二级导航

  • menu 菜单

  • submenu 子菜单

  • sideBar 侧栏

  • sidebar_a, #sidebar_b 左边栏或右边栏

  • main 页面主体

  • tag 标签

  • msg #message 提示信息

  • tips 小技巧

  • vote 投票

  • friendlink 友情连接

  • title 标题

  • summary 摘要

  • loginbar 登录条

  • searchInput 搜索输入框

  • hot 热门热点

  • search 搜索

  • search_output 搜索输出和搜索结果相似

  • searchBar 搜索条

  • search_results 搜索结果

  • copyright 版权信息

  • branding 商标

  • logo 网站LOGO标志

  • siteinfo 网站信息

  • siteinfoLegal 法律声明

  • siteinfoCredits 信誉

  • joinus 加入我们

  • partner 合作伙伴

  • service 服务

  • regsiter 注册

  • arr/arrow 箭头
  • guild 指南

  • sitemap 网站地图

  • list 列表

  • homepage 首页

  • subpage 二级页面子页面

  • tool, #toolbar 工具条

  • drop 下拉

  • dorpmenu 下拉菜单

  • status 状态

  • scroll 滚动

  • .tab 标签页
  • .left .right .center 居左、中、右
  • .news 新闻
  • .download 下载
  • .banner 广告条(顶部广告条)

电子贸易相关

  • .products 产品
  • .products_prices 产品价格
  • .products_description 产品描述
  • .products_review 产品评论
  • .editor_review 编辑评论
  • .news_release 最新产品
  • .publisher 生产商
  • .screenshot 缩略图
  • .faqs 常见问题
  • .keyword 关键词
  • .blog 博客
  • .forum 论坛

CSS文件命名 说明

  • master.css,style.css 主要的
  • module.css 模块
  • base.css 基本共用
  • layout.css 布局,版面
  • themes.css 主题
  • columns.css 专栏
  • font.css 文字、字体
  • forms.css 表单
  • mend.css 补丁
  • print.css 打印

参考:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容