oocss一些笔记

2019-08-14  本文已影响0人  一点金光

在项目中思考如何抽像模块(类似js中对象的创建;把样式抽象化),如何重用样式(继承)。

什么是它
为什么要
如何实现
简单示例
一些思考
参考文献

什么是它

01.是一种方法
02.面向对象的

为什么要

希望写出:
01.更重用的
02.更维护的
03.更可扩展
的代码

如何实现

一些原则
01.把容器和内容分离:实现内容插入到哪个容器都行。--可重用性
02.把基础和扩展分离:实现基础被哪个样式修饰都行。--可扩展性

一些建议
01.是否大型网站:大型网站的开发,可重用性的组件相对来说要多,建议要使用OOCSS规范。
02.能否够巧妙用:如果不能够巧妙的使用,创建组件对你说就是创建一堆没用的东西,会成为烂摊子。
03.要写说明文档:给每个组件文件写一份说明文档,有助于调用和维护。

简单示例

发现问题
01.一个博客中,有一个"meta date(作者发布时间相关信息)"将在一个页面的3个不同地方出现。
02.三个"meta date"虽然位置在不同地方,并且样式风格不一样。
03.但他们都有一个共同点,就是HTML结构可以是一样的。

一些想法
01.把容器和内容分离:
写一个html基础内容,写一些html容器内容。
02.把基础和扩展分离:
写一个基础样式,写一些容器样式。
03.把容器和内容连结:
04.把基础和扩展连结:
方式01:通过"基础类名 扩展类名",从而达到基础对象的可重用性。
方式02:通过新增一个由他们组合的类名,从而达到基础对象的可重用性。

一些步骤

建基础类
.metadate{/*...*/}
建扩展类
.postMetaDate{/*...*/}
.commentMetaDate{/*...*/}
.useInfoMetaDate{/*...*/}
使用类名:通过对基础对象扩展类名,从而达到基础对象的可重用性。
class = "metadata postMetaDate"
class = "metadata commentMetaDate"
class = "metadata useInfoMetaDate"
修补样式:
01.用了哪些特性
02.基础的有哪些
03.某具体由哪些

用的特性
01.字体大小
02.元素边距
03.文字颜色

具体样式
基础样式:font-size:1.2em; margin:10px 0;
扩展样式:
00.某篇文章:font-size:1em; margin:0 0 10px 0; color:#063070;
01.某个评论:color:#063070;
02.用户信息:color:#fff;

一些思考

关于可重用的实现
01.借助类名:通过对基础对象扩展类名,从而达到基础对象的可重用性。
02.预处理器:借助预处理的变量、混合、包含、扩展、继承特性。

关于可扩展的实现
01.借助类名:通过对基础对象扩展类名,从而达到基础对象的可重用性。
02.预处理器:借助预处理的嵌套、混合、扩展、继承特性。

关于类名命名规范

参考文献

w3cplus:oocss-concept
w3cplus:an-introduction-to-object-oriented-css-oocss
smashingmagazine:an-introduction-to-object-oriented-css-oocss

上一篇下一篇

猜你喜欢

热点阅读