样式名称面面观

我们在项目中经常需要对某些元素设置尺寸,如输入框、文本框、字号大小等等。这些尺寸的宽度可能是步进的,也可能是随机的数字。下面的css命名方式你可能遇到过。

.font12{font-size:12px;}
.font14{font-size:14px;}
.input-200{width:200px;}
.input-200{width:200px;}
.textarea-200{width:200px;height:200px;}
.textarea-400{width:400px;height:400px;}

这些样式可能会被我们当成公用样式,在任何页面的任何地方使用,多次复用,符合咱们css优化的逻辑,而且样式的命名非常语义话,一点都不怕分不清楚。

但是我们也要注意到这种直观的命名方式的所隐藏的危险,当我们的产品达到一定量级的时候,突然接到一个产品需求,就是老大们觉得目前的字号太小,让我们改大一号,那我们如何操作呢?

第一种方式,最简单也最直接,那就是直接修改css,PHP不用去改动,这种好处就是页面构建工程师可控。我们的方案就是:

.font12{font-size:13px;}

很快漫山遍野使用 font12 样式的元素都变化了,很快很强大,但是问题是原来直观的样式名名不副实了,让后来的小弟弟、小妹妹们都迷惑了。
还有一种兴师动众的方案,让对css样式陌生的PHP/asp/jsp工程师一起动手吧!我们这边将样式做修改:

.font13{font-size:13px;}

PHP/asp/jsp 师们则漫山遍野、沟沟坎坎的找 <element class=”font12″>将他们变成<element class=”font13″>,人多了,出错的几率就大了,风险也大了,挨骂的几率也高了。

有没有更好的解决方案呢?其实问题的源头就在于咱们起的那个名字上,不是有人说“名字决定命运吗?”,名字起的不好注定命运坎坷,名字带个“金”啊“斗”啊肯定幸福美满。咱们的应该起个更有诗意的名字而不是那么直白的“臭蛋”、“狗屎”。

大家每个人都买过衣服吧?咱们回想一下 XS、S、L、XL、XXL、XXXL,并且我们经常碰到不同品牌的产品相同的号码实际上却不一样大。这又时常不是我们日常中碰到的呢?比如我们经常看见一些CSS框架库,他们是英语国家发明的,当我们在使用的时候就需要根据自己的情况做修改了。

言归正传,回到样式的命名上,我们根据衣服的经验来重新命名,让它从根上更健壮一些。

.font-xs{font-size:9px;}
.font-s{font-size:10px;}
.font-x{font-size:12px;}
.font-xl{font-size:14px;}
.font-xxl{font-size:16px;}
.font-xxxl{font-size:18px;}

这样当我们改动属性值的时候,是不是觉得更优雅呢?不用纠结于那些直白的数字。

其实直白的数字也没有那么可怕,我们使用栅格布局的时候,直白的数字让我们更方便,比如我们固定宽度的布局,我们可以预设一个基本单位,这个的宽度是80,我们可以像下面这样部署不同宽度的东西。名字如下:

.col-1{width:90px;}
.col-2{width:180px;}
.col-3{width:270px;}
...
.col-9{width:810px;}
.col-10{width:900px;}

步进式的命名也很容易控制。当我们看到设计稿不符合规则的时候,我们就需要让他们修改一下设计稿,让我们的计算更加方便。