精简高效的CSS命名准则和方法（2）
作者：zhangxinxu 来源：zhangxinxu 发布时间：2010-09-17 18:38:00
我想我们都希望写出精简高效的CSS代码，如果CSS重用性越高，想必就越高效。这如人的名字一样，如果名字越普通，越没有含义，越容易被重用，所以CSS要想重用性高，就需要命名简单。但是，简单的命名越容易造成样式冲突，例如.more{}。从这点上来说，重用性与样式冲突时两个对立的矛盾体。
不过，万幸的是，这种矛盾并不是不可调和的。记住一些准则/方法，CSS既可以有高度的重用性，又不会有样式冲突的困扰。下面就将介绍这些命名方法。
三、面向属性的命名方法
我们习惯在CSS命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝首页“免费注册”按钮上的class名称：help-guest-regist
上面的class命名语义就很明显，独眼龙看告示——一目了然，”help-guest-regist”就是”帮助-顾客-注册”，很nice，很人性化的命名。
作为在单一的首页上使用，我是很难挑出什么毛病来的。
但是，从道家“无”的哲学思想来看，语义其实是对自身的一种束缚，越是语义强烈的命名越是没有重用性（尤其是内容语义的）。举个实际点的例子，例如人人网的右侧边栏的标题：//zxx:一般找这类反例我就喜欢找人人网还有新浪，基本上一找一个准。人人网虽然外表长得跟facebook类似，但是就CSS而言，差距不是一两个档次的。
这个标题的class名是”side-item-header”，样式如下图所示：
现在一切ok，现在设想下，如果页面中间的模块有个标题，其样式也是：
{padding:0 0 8px; text-align:right;}
那你发现前面已经有一模一样的CSS样式后，你会怎么办。把中间的标题也用”side-item-header”这个class吗？这里”side”就是表示“边”的意思，这就意味着这个样式用在非侧边栏就是不合理的。你能做的估计即使新命名一个class，就像是”body-item-header”，明明是同样的CSS属性，结果却不能重用（即使使用标识符组合并CSS，这里的命名也是没有重用的）。
可见命名不合理会大大限制你的CSS重用性。如何命名才能让CSS发挥最大的重用性潜力呢？答案就是“面向属性的命名”。这种命名就是要让你把页面啊设计啊什么的通通塞到马桶里冲走，不要管页面什么位置，什么内容，there is noting, 这儿什么都没有，既然什么都没有，也就没有了任何限制，于是CSS可以自由出入于任何地方，无限重用，而且不用担心冲突，因为“面向属性的命名”就是针对自身属性的一种命名方式，只会overwrite，不会冲突。
相比很多同行都用过这样的命名方式，只是不够系统，不够大胆、彻底，多浅尝辄止，比如像是开心网，还有时光网的CSS代码的前面一部分样式命名：
0
投稿猜你喜欢
Python中多线程使用到Threading模块。Threading模块中用到的主要的类是Thread，我们先来写一个简单的多线程代码：#- 1.stack()stack()用于将列索引转换为最内层的行索引，这样叙述比较抽象，看示例就容易理解啦：准备一组数据，给其设置双索引。imp
- 函数：原型每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译，使用其原文)。这个属性非常有用：为一个特定类声明通用的变量
- 网上的SQL优化的文章实在是很多，说实在的，我也曾经到处找这样的文章，什么不要使用IN了，什么OR了，什么AND了，很多很多，还有很多人拿出
- 1、前言最近看了一些同学的面经，发现无论什么技术岗位，还是会问到 get 和 post 的区别，而搜索出来的答案并不能让我们装得一手好逼，那
- 获取nc数据的相关信息from netCDF4 import Datasetimport numpy as npimport pandas
- 目录简介Spare data的例子SparseArraySparseDtypeSparse的属性Sparse的计算SparseSeries
- vscode检测到#include错误，请更新includePath。解决方法最近电脑重做，重新安装了一边vscode，但是写代码的时候发现
- 前言本文提供获取视频时长的python代码，精确到毫秒，一如既往的实用主义。环境依赖 ffmpeg环境安装，可以参考：window
- html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖flash。代码如下：/* 创建ran
- 前言有一天朋友A向我抱怨，他的老板要求他把几百份word填好的word表格简历信息整理到excel中，看着他一个个将姓名，年龄……从word
- python中函数参数是引用传递（不是值传递）。对于不可变类型，因变量不能被修改，所以运算时不会影响到变量本身；而对于可变类型来说，函数体中
- 1.jsvar obj=document.getElementById(selectid);obj.options.length = 0;
- 最近微信迎来了一次重要的更新，允许用户对”发现”页面进行定制。不知道从什么时候开始，微信朋友圈变得越来越复杂，当越来越多的人选择”仅展示最近
- binlog介绍binlog,即二进制日志,它记录了数据库上的所有改变.改变数据库的SQL语句执行结束时,将在binlog的末尾写入一条记录
- Introduction分享今天同事问的一个问题, 下面这段代码会报错，先看代码：重点是el-form-item组件的prop属性<t
- 音频文件放入和.py文件同级的目录下import winsound # 导入此模块实现声音播放功能import time # 导入此模块，获
- 浏览器打开网页的过程就是爬虫获取数据的过程，两者是一样一样的。浏览器渲染的网页是丰富多彩的数据集合，而爬虫得到的是网页的源代码htm有时候，
- asp分页做为一个经典的asp问题，有着非常丰富的分页形式和分页方法，但是大多数的asp分页都是使用VBscript作为服务器端的脚本，本文
- 目录一、装饰器使用场景二、为什么需要装饰器1、先来看一个简单例子：2、增加需求3、又有需求三、基础装饰器入门1、装饰器语法糖2、对带参数的函
