|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
破洛洛文章简介:要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。
好久没有更新blog了,这段工夫其实是产生了良多的事,累身累心。但仍是有良多想做的事,好比更新merceCSS、把一向以来所总结的有关模块化的内容收拾出来跟人人分享、列入交换会等等。
模块化计划我已提过良多了,像《从宜家的家具计划讲模块化》、《页面重构中的模块化头脑》、《页面重构中的组件制造要点》都是跟模块化相干的,不外之前一向没有讲到详细完成方面的内容,只是一些头脑。此次重点讲一下完成方面的内容,权当到今朝为止我对模块化的一些总结收拾。
要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。
写历程序的同砚应当都晓得,变量是有感化域的(不晓得的同砚本人往问谷歌,这里就不作注释了),款式的界说也一样存在着感化域的成绩,即界说的感化局限,很简单就可以了解,以下面的p的感化域:
/*感化域:全局*/p{text-indent:2em;}
/*感化域:.demo这个类中*/.demop{color:#000000;}
款式选择器的优先级是进修款式的基本常识,一同复杂回忆下:
- 标签的权值为0,0,0,1
- 类的权值为0,0,1,0
- 属性选择的权值为0,0,1,1
- ID的权值为0,1,0,0
- important的权值为最高1,0,0,0
利用的划定规矩也很复杂,就是选择器的权值加到一同,年夜的优先;假如权值不异,后界说的优先。固然很复杂,但假如誊写的时分没有注重,很简单就会招致CSS的反复界说,代码冗余。
从下面我们能够得出两个关头的要素:
- 权值的巨细跟选择器的范例和数目有关
- 款式的优先级跟款式的界说按次有关
懂得款式的权值后有甚么感化呢?好比能够如许用:举一个最复杂的例子,
body{color:#555555;}.demo{color:#000000;}
<p>这里的笔墨色彩受全局界说的影响</p>
<divclass="demo"><p>这里的笔墨色彩受类demo界说的影响</p></div>
<pclass="demo">这里的笔墨色彩受类demo界说的影响</p>
晓得了款式的权值,你就晓得下面例子的体现是如何的了。进一步的使用,就是模块化了,好比《从宜家的家具计划讲模块化》中的例子,具体请移步。
破洛洛文章简介:要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。
再来讲说“感化域”,信任人人很简单就会想到“全局”、“大众”这些词,存眷过模块化的同砚应当都晓得,网上说得最多的一种“模块化”,就是像header、footer如许的以年夜地区分别。在客岁web尺度交换会(页面重构公道化会商)上,克军提出了“款式的三层架构”——大众划定规矩层、大众模块层、项目层。这些都有它们合用的局限,并且最年夜的长处是简单了解和使用。这里也不再做重诉了,感乐趣的同砚能够找找相干的文章。
我在这一块的分别上,有点相似克军的“款式的三层架构”,有一点小的不同,我是以“感化域”来分的:大众级(全局)、栏目级(部分大众)、页面级。怎样分别这个“感化域”呢?很复杂,全局的global就是大众级的;只在栏目顶用到的部分global是属于栏目级的;只影响单个页面的就是属于页面级的了。
最初几点要出格注重的:
- 除标签选择器以外,哪些类是利用于大众级、栏目级中的,如
- .tx_hit{color:#FF0000!important;}
复制代码 的合用局限是大众级的,应当放于全局的界说中。但,假如它只影响于某个栏目,那末就应当把它放于栏目级的感化域中。
- 标签选择器一样平常属于栏目界说,偶然会用于大众级感化域中,除最基本的reset以外,应尽量少利用在大众级界说中
- 可承继的属性界说利用时须注重影响的局限,出格是在标签选择器中利用时
接上去的内容就是以这个为基本的,但愿人人能了解“款式的感化域”,关于后继内容的了解会很有匡助。
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。 |
|