工具&利器

CSS命名规则之think

 

== think (20170411) ==

继承

CSS 对象 css类间的继承复用、写CSS的时候,每写一个顶层的CSS类都要有整个项目的意识。这个顶层的类需要通过的,可被重新覆盖的

以对象的思维写了两个按扭,这两个按扭具备继承、可重用、父类可被重写(多态)

css类命名规则

情景:
ks-img 这个类如果这个类不是全平台都有相同的属性的话,请不要直接在类写属性

.ks-img {
//这个类请不要随意写属性,因为这个类可以很多的地方都可以使用到
//如首页的图片、列表页的图片、头像
//当然有一种方式你可以为每页的图片定义一个类名,但起名字你不费劲么?
}

每个页面都要有同用类加当前页面的类
比如首页

.ks-index {
//这个是首页的最顶层的类
}

.ks-index .ks-img {
//定义首页所有相关图片的共同样式
}

.ks-index .ks-top .ks-img {
//定义首页上部分相关图片的样式
}

上面的这个例子就是可以大大节省代码,同时方式管理,重用式过,也不用为起名字起烦恼。

== think (date 20170425) ==

类名的定义

尽量CSS写于3级,这样可以灵活的向上或向下扩展

.pro-index

.pro-index .pro-nav

.pro-index .pro-nav

======

优先级至下而上

框架CSS类

项目基础类

模块通用类

几个页面通用类

指定页面类

 

发表评论