css样式分离jquery行动

“当你不创造东西时,你只会根据自己的感觉而不是能力去看待问题。” – WhyTheLuckyStiff
掌握某个东西需要10年或10000个小时,也就是汉语中的“十年磨一剑”,所以不用着急。
成功哲学很简单:Do Things, Tell People!

如果你没有任何能够让人重视的技能,那就学一些。这是你的未来。我们有Khan学院维基百科软件学院,以及整个世界的知识宝库中你的手边。使用它们。然后做一些能够拿出来说的东西。让它很酷。让它很有趣。花时间去做它。不要有任何顾忌。即使它是你曾经做的最没有价值的东西,只要你觉得它还值得一提,那就把它做出来。这很容易,因为你在做你认为很酷的东西,你有兴趣,如果发现它确实没有价值,那更好,因为你再不需要花时间去维护它了!

我们在html文档里定义css样式渲染类名用的是class这个属性。提到class,在编码语言里是一个默认的“类”的代名词。也就是说,其实css的作者其实在创作css的时候其实就是基于“类”来考虑的,要不然也不会用class这个词作为css样式的属性名。
.con-text {
padding: 8px 10px;
background: red;
border: 1px solid #CCC;
color: blue;
}
<p>test</p>
如果我们需要多个这样类似的p,但又要求文本颜色不一样的话,会怎么办,重写多个类? .con-text1, .con-text2 … ?
span style=”white-space:pre;”> 显然太不现实,也太过冗余,所以或许我们需要用的面向对象中一个重要的思路–抽像公共接口。或许我们可以这么做:
.normal-text {
padding: 8px 10px;
background: red;
border: 1px solid #ccc;
}
.red {color: red}
.blue {color: blue}
<p class=”normal-text red“>test1</p>
<p class=”normal-text blue”>test2</p>
是的,这样做没错,而且很好,可是慢着,如果我们还要要求每个p不仅文本颜色不一样,背景色也不一样。。。怎么办?有人会想,我们照上面的思路继续抽象就好了。比如:
.normal-text {
padding: 8px 10px;
border: 1px solid #ccc;
}
.bg-red {background: red}
.blue {color: blue}
<p  class=”normal-text bg-red blue“>test</p>
 我们继续纠结下去,我们要border也不同,甚至padding也不同,怎么办?还继续分离吗?如果我们钻个牛角尖,我们对css进行彻底的分离,最终的结果会全是类似于
.bg-red {background: red}
.blue {color: blue}
.pad-t8 {padding-top: 8px}
.pad-l10 {padding-left: 10px}
最终的结果就不是面向对象了,而是面向属性了…是的,分离的越彻底,开发时的效率会越高,css文件也会越小越精简。可是别忘了这样做的后果是可能一个元素需要写5个,甚至10个并列的css类名去渲染
那这样,我们所谓的“类”意义何在,这样又和写style内联样式有什么分别?我们维护时是不是要在html文档里满篇去找要几十上百个类名去增删改??
所以css分离是好的,可是过度的分离是不行的。如何把握尺度和权重才是最重要的:
1.css面向对象请面向通用的对象。比如box,一个网站可以有多个box样式,boxA,boxB…boxF…等等,对应响应的boxA-tit,boxB-tit…等等,为这些通用的对象抽离公用的样式
2.可以为全站都通用的样式进行抽离:比如清除浮动
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
.clearfix {zoom: 1;}
/* End hide from IE-mac */
3.可以为栅格化的布局样式做抽离, 如:col-a{width:..}, clo-b {width: ..}等等
4.需要的时候局部的面向属性的绝对分离也是可以的,但请在有需要的时候局部使用。
5.建议class的并列类名不要大于3个,否则就需要考虑是否应该稍微聚合一下了。

构造函数/原型 的混合方式来构建JS

var slider = function () {
var init = function () {
this.pos();
}
init.protorype = {
pos : function () {
//TODO
},
anim : function () {
//TODO
}
auto : function () {
//TODO
}
}
return init;
}();
/* init */
new slider();

1)css并没有难懂的地方,关键在于积累。多去了解为什么要这么写css。比如几个很重要的css2.0中的属性,position,display,float,overflow 之类的,它们常用的值和应用场景为什么要这么用,这么去组合,多思考对于攻克布局有莫大的好处。

2)学javascript可以尝试从一些简单的可实现的东西开始,比如怎么操纵一个dom元素,改变它的各种东西,让它动起来。然后过渡到写组件。我这里建议一定开始要从学习原生的javascript语言开始。当你开始尝试写组件的时候,就一定要开始注意代码的结构了。养成好的编码习惯非常重要,会极大的推动后续的学习进度。所以这个阶段建议找 国内外用原生js代码编写的 优秀的,高代码质量的js组件做参考。 思考为什么别人要这么写,这么去组织代码

3)对js有一定认知之后,一定要深入系统的去了解语言底层,这时候建议买好的书系统学习,象什么犀牛书之类的,我就不多说了。了解语言底层的逻辑很重要。

4)当过了第三阶段之后,我建议可以尝试着阅读国内外优秀的js底层基础库的源码,并尝试自己实现一套。不用奔着想“造轮子”有多少人用的想法。而是实现这个架构和其中的代码细节对于自己的学习非常重要。比如我自己也有一套粗糙的js基础库 https://github.com/hongru/Leta ,但我并没打算将它应用出去,因为我它并没那么优秀,对我的意义在于实现它让我了解了国内外主流js基础框架的实现思路和大体架构。同时又是一份沉淀,当我某时想用某段代码时,直接找出来就能用。

5)在这个阶段,我强烈建议一定要及时补充后端语言能力和思路,了解别的语言,别的框架的架构和api实现逻辑。相互辅助,因为这时候你学其他的语言,入门也都变的容易,同时别的语言又能反过来加深对当前知识的理解。

6)再往下就可以根据自己的兴趣方向或者工作需求继续学习了。比如可以尝试继续基础技术,做基础工具,架构,平台。或者根据自己兴趣专注一个或几个方向,比如canvas,webgl之类的,或者在业务架构,项目深度优化上有所建树。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: