IT-北北报

CSS架构(Object Oriented CSS)

2016/11 30 16:11

Object Oriented CSS简称OOCSS,直译就是”面向对象的层叠样式表”,那么怎么个面向对象法,请听我娓娓道来。

首先OOCSS并不是一门新语言,而是对css的抽象化、模块化、继承并复用的概念模型。
先举一个形象的例子,比如我们在网页中描述一个这样一个按钮

upload-ueditor-image-20161130-1480494510530063608

一般情况下你可能会这么写

<button type="button" class="button">Primary button</button>

.button {

background-color: #2d6ca2;

border-color: #2b669a;

padding: 10px 16px;

font-size: 18px;

border-radius: 6px;

font-size: 14px;

font-weight: 400;

line-height: 1.4;

text-align: center;

}

但是OOCSS可能要考虑细分类别与复用,就好比一盘宫保鸡丁是由胡萝卜、黄瓜、鸡丁、花生加调料几个重要组成部分组合而来,而花生这个类又可以用于老醋花生米这道菜,所以我们可能会这样写,Bootstrap在这一点做的很好,我引用了这个例子

<button type="button" class="btn btn-primary btn-lg">Primary button</button>

.btn {

padding: 5px;

font-size: 12px;

border-radius: 6px;

text-align: center;

}
.btn-primary {

background-color: #2d6ca2;

border-color: #2b669a;

}
.btn-lg {
padding: 10px 16px;

font-size: 18px;

font-weight: 400;

line-height: 1.4;

}

我想通过这个示例,你已经大概了解了OOCSS是个什么东西了。我们继续深入讨论一下这件事,要怎么分离类名才科学合理,在这有几个OOCSS的原则供大家参考
1、结构与样式的分离
每个元素都有不同的视觉展现,但是在同一项目中按钮、导航、下拉菜单等等是可以高度复用的,也许在页面A你使用的按钮,在页面B使用的时候只是调整了一下大小和颜色,所以如果结构和样式分离,控制大小的分别是.btn-sm和.btn-lg类,控制颜色的是.btn-info和.btn-error类,那么你基本就完成了结构与样式的分离。
2、容器与内容的分离
基于OOCSS建立的类模块,书写的样式不依赖于任何不必要的父级元素。这意味着它们可以在文档的任何地方被复用,无论结构如何,深度定制的设计样式模型应该单独去书写;简而言之,你的共用样式不要依赖于设计逻辑,不要为了实现一个效果给一个class写非常多的属性,如果一个class里超过10行属性,这时候你可能就要考虑是不是有些东西可以抽离出来,做到这点需要有很好的大局观,可能对于新手来说确有难度,但是请细心领悟这一点。
3、使用类名扩展基础类
一个对象总是由一个基础类,和多个扩展类拼装而成,请记住这一点
4、坚持语义化定义
刚刚的那个例子中颜色为什么不定义.btn-bule和.btn-red类,这就要讨论面向对象的css的本质是对象,info和error显然更具化,专业的说叫语义化,这就大大降低了复用的成本,因为你知道错误的颜色就是.btn-error。

总之,OOCSS是一套很深的方法论,需要大量的实践积累,更多的感悟,相信你会写出优雅的OOCSS。

你不知道的console

2016/11 12 22:11

console可不止这一个log方法,它还有:

console.info 用于输出提示性信息

console.error用于输出错误信息

console.warn用于输出警示信息

console.debug用于输出调试信息

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”); console.debug(“调试信息”)

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

console.log(“%s年”,2016);

console.log(“%d年%d月”,2016,6);

console.log(“%f”,3.1415);

console.log(“%o”,json);

 

如果你觉得上面的输出信息太单调了,我们还可以这样:

console.log(“%c自定义样式”,“font-size:20px;color:green”);

console.log(“%c我是%c自定义样式”,“font-size:20px;color:green”,“font-weight:bold;color:red”);

 

console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码

<table>

<thead>

<tr>

<th></th>

<th></th>

<th></th>

<th></th>

<th></th>

</tr>

</thead>

</table>

<script>

var table=document.querySelector(“table”);

console.dirxml(table);

</script>

 

console.group输出一组信息的开头

console.groupEnd结束一组输出信息

console.group(“start”);

console.log(“子项”);

console.groupEnd(“end”);

console.log(“aa”);

 

console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

var isTrue=true;

console.assert(isTrue,“我是错误”);

isTrue=false;

console.assert(isTrue,“我是错误2″);

 

console.count  当你想统计代码被执行的次数,这个方法很有用

function play(){

     console.count(“执行次数:”);

}

play();

play();

play();

 

console.dir  直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

<table>

<thead>

<tr>

<th></th>

<th></th>

<th></th>

<th></th>

<th></th>

</tr>

</thead>

</table>

 

var table=document.querySelector(“table”);

console.dir(table);

console.timeEnd 计时结束console.time 计时开始

console.time(“array”);

var a=0;

for(var i=0;i<100000;i++){

a += i;

}

console.timeEnd(“array”);

 

console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

console.timeLine和console.timeLineEnd配合一起记录一段时间轴

前端打怪升级的心路历程

2016/07 11 15:07

如果前端像一个打怪升级的过程,满级90级,基本曲线可能是这样的。
新手村任务学习css和div,还有简单js,学会了切图,恭喜你升到了5级,可以打开第一个传送门,去城镇中心了 =>

来到城镇中心,你接到了第一个任务,去野外打怪练级,主要是熟练掌握Javascript与jQuery,通过这个任务,你升到了10级 =>

接下来的任务稍微复杂一些,去野外探索主流的jQuery Plugin,UI框架,HTML5、Css3特效,经过了这番历练,你顺利升级到了15级 =>

接下来,你有幸离开城镇中心,去整个world去自由探索了,在这里你将遇到前端庞大的生态体系,并且你要根据你的情况给自己加天赋点了。第一件事,你要学会简单工程化思想,比如自动构建,这里你可以根据自己的天赋去学习gulp or grunt,完成了前端的压缩合并,降低http请求的初步实践后,恭喜你,升到20级了 =>

然而困难才刚刚开始,如何合理的安排你的目录结构,怎么更好的去做构建将成为你的下一个课题,从现在开始,你要建立模块化的思想了,css、js、html、image怎么合理的排兵布阵,发挥应有的效力,为了完成了这些,你可能用到了sass or less等css预编译框架,requirejs or seajs模块化脚本框架,至此,25级我想你应该有了 =>

但是如今的前端发展已经不是你能想象的了,25级在很多人看来已经是大牛了,然而,我们目前前端界有三个最困难也是必须要啃的副本,AngluarJs、React、Vue,AngluarJs是最早由Google发布的MVVM框架,so,或多或少你要刷一两次这个副本,去理解它的思想,刷完这个副本,我觉得你至少要到35级了 =>

紧接着React和Vue的副本难度将更加巨大,很多颠覆性的思想开始弥漫开,你再也不能像从前那样去思考前端问题了,你要突破自己,颠覆自己,去迎接组件化时代的到来,同时,新的ES6装备你必须刷到,node.js的应用你也要如数家珍,这两个副本至少会让你升15级,50级 =>

当然伴随25级后的整个过程中,你要经历PC端和移动端双端开发的训练,也许你会接触bootstrap、也许是Ionic,也许是zepto,也许是React ui,也许你会懂flex布局,总之,移动端的训练会给你增添10级的经验,60级 =>

至此你应该已经拥有组团打Boss的能力了,接下来你可能要思考的更加广泛一些,如何与服务器端配合,底层数据库逻辑是怎样的,请求是怎么通讯的,业务是怎样的,怎么样打怪可以掉更多装备与金币,这些思考可以让你升10级,70级 =>

我觉得70级之后,真的就是要拼天赋的时候了,这之后的发展道路完全看你的天赋点,你是力量型技术主力,成为技术大牛;还是法师型指挥官,掌控全局;亦或是敏捷型伤害输出,对技术产品有敏锐洞察力,引领方向。不管你是什么类型,这个阶段的磨练将经历你职业生涯中比较痛苦的过程,这之后……

我也说不定了……



无觅相关文章插件,快速提升流量

友荐云推荐