CSS命名方法

2016-01-26  本文已影响59人  居客侠

转载自(http://web.jobbole.com/83967/)

常见class关键词：

制定简单规则：

实战操作

以布局入手，大概结构如下：

header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center
header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center

具体可参考HTML整站结构设计，这里我们可以看出都是些简单的关键词，比较好理解，一看就知道是什么。

现在问题来了，如果其他地方也要用到这些关键词怎么办？

修饰关键词

以header为例，我们可以添加前缀表示不同的header，如区块头部.block-hd(hd为header简写)，modal头部.modal-hd，文章头部.article-hd。

同样标题也可以分为，页面标题.page-tt(title的简写)，区块标题.block-tt等。

同样，这给我们提出了第二个问题，如果要特殊化某个class该怎么办？

特殊化class

以上面的tt为例，大概有三种办法：

第一种办法：直接修改class，将.page-tt修改成.page-user-tt(可以采用scss的%先定义共用的代码)。

第二种办法： 追加class特殊化，根据我们上面定义的规则，在.page-tt上追加一个class成为.page-tt.page-tt--user，注意.page-tt--user不是一个独立的class，它使基于.page-tt这个基础上的。

第三种办法： 使用父类，给一个范围，于是形成.page-user .page-tt。

一般我们使用的是第二种和第三种办法，因为这两种都有共同的.page-tt，可以比较方便控制一些基础共有的样式。

由第三个通过父类控制的办法，我们进入第三个要讨论的问题，层级结构

层级

最适合层级的例子莫过于ul>li结构了，如下面的结构：

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>
<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

一般来说我们也有两种办法定义层级，第一种为继承式，第二种为关键词式。


// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text
 
// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的list，而li的子元素接着li的item；至于关键词式则完全由关键词来表示层级，list>item>filed正好构成三层等级。

最后由我们的层级进入我们最后一个问题，如何控制样式的范围

样式范围

这里以腾讯课堂的课程详细页右边栏为例，如下图：

腾讯课堂课程详细页

三个区块的基础框架为：


.aside-block.block--xxx>
    h3.block-tt
    .block-bd
.aside-block.block--xxx>
    h3.block-tt
    .block-bd

其中.aside-block.block--xxx用到了我们的特殊化class，而.block-tt,block-bd则使用了我们的修饰关键词，至于.aside-block与它的子元素之间则使用了我们上面说的继承式层级。现在根据这个层级结构我们定义基础样式如下：


.aside-block{
    .block-tt{}
    .block-bd{}
}
.aside-block{
    .block-tt{}
    .block-bd{}
}

假设这里的联系机构区块的标题不一样，我们则可以：


.block--contact{
    .block-tt{}
}
.block--contact{
    .block-tt{}
}

当然如果本身有5个区块，2个标题一样，另外三个标题又一样，也许我们就有需要给.block-tt追加一个特殊化class，或者给aside-block特殊化一个class，如：


.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
}

基础框架讨论完毕之后，就轮到我们的内容了，以联系机构为例：

使用ul>li结构，所以样式是另外一个独立的范围，不嵌套在之前的.aside-block里面，html及css代码如下：


ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

这里我们li没有设置class，而p使用了一个全局的class.gray


.gray{}
.contact-list{
    li{}
    .item-icon{}
    .item-tt
}

.gray{}
.contact-list{
    li{}
    .item-icon{}
    .item-tt
}

同理如果我们有其他地方应用这个可以拷贝过去，而如果需要一点调整，我们可以使用父元素来控制，如这里我们可以使用.block--contact来进一步调整contact的样式，如：


.block--contact{
    .contact-list{
        li{}
    }
}

.block--contact{
    .contact-list{
        li{}
    }
}

至此，我们的class命名方法讨论完毕，说到底就是先记住一些必备的基础关键词，然后合理应用上刚才提出的修饰关键词，特殊化class，层级及最后的样式范围就可以了。

上一篇下一篇

猜你喜欢

热点阅读