CSS实例教程:词义化方式取代构造化方式
本文摘要:今日脚本制作之家想根据剖析一个时兴三栏合理布局中的必需原素,来为大伙儿解读有关应用词义化方式取代构造化方式来取名CSS类的提议和具体指导。CSS编码的取名国际惯例一直是大伙儿受欢迎探讨得话题。今日脚本制作之家想根据剖析一个时兴三栏合理布局中的必需

今日脚本制作之家想根据剖析一个时兴三栏合理布局中的必需原素,来为大伙儿解读有关应用词义化方式取代构造化方式来取名CSS类的提议和具体指导。

CSS编码的取名国际惯例一直是大伙儿受欢迎探讨得话题。今日脚本制作之家想根据剖析一个时兴三栏合理布局中的必需原素,来为大伙儿解读有关应用词义化方式取代构造化方式来取名CSS类的提议和具体指导。 CSS类取名的词义化VS构造化方法
一般来讲,CSS类名的词义化申明方法理应考虑到你的网页页面中某一相对性原素的 作用 ,单独于它的 精准定位 或准确的特点(构造化方法)。像left-bar, red-text, small-title 这种都归属于构造化界定的事例。
要我们看一下下边这一事例:
CSS-语义化-结构化
而如今大家想把网页页面中的原素替换一下部位,假如你应用的是构造化方法(1),那麼你也就要把全部CSS类名再次开展界定,由于他们的部位发生变化。在合理布局(3)中,大家见到原素都倒转了:right-bar 如今变成 left-bar ,而left-content 变成 right-content 。假如你应用词义化方法则防止了该类难题。

也就是说,应用词义化方法得话,你一直在改动网页布局的情况下能够只是改动有关CSS类的特性就可以,而无需改动他们的类名了,假如网站的编码很巨大,这将节约很多的時间。 有关词义化的一些提议:
在刚开始以前,我觉得强烈推荐二种简易的撰写不错的CSS编码的具体指导战略方针:
为CSS类名界定的情况下,尽可能应用小书写母,假如有2个之上的英语单词,在每一个英语单词中间应用 - 符或英语单词首英文字母英文大写(第一个英语单词以外)。如: main-content 或 mainContent 。 提升CSS编码,仅建立重要关键的CSS类并举新为子原素应用合乎HTML规范的标识(h1, h2, p, ul, li, blockquote, ),比如,不必应用这类哦你哪个方法:

#container{ }
/* - Top section -*/
#header{ }
#navbar{ }
/* - Main -*/
#menu{ }
#main{ }
#sidebar{ }
/* - Footer -*/
#footer{ }
Container
#container 便是将你网页页面中的全部原素包在一起的一部分,这一部分你要能够取名为: wrapper , wrap , page . Header
#header 是网页页面的头顶部地区,一般来说,它包括网站的logo和一些别的原素。这一部分你要能够取名为: top , logo , page-header (或 pageHeader). Navbar
#navbar 等同于于横着的导航栏栏,是最典型性的网页页面原素。这一部分你要能够取名为: nav , navigation , nav-wrapper . Menu
#Menu 地区包括一一样的连接和莱单,这一部分你要能够取名为: sub-nav , links . Main
#Main 是网站的关键地区,假如是blog得话它将包括你的系统日志。这一部分你要能够取名为: content , main-content (or mainContent )。 Sidebar
#Sidebar 一部分能够包括网站的主次內容,例如近期升级內容目录、有关网站的详细介绍或广告宣传原素等 这一部分你要能够取名为: sub-nav , side-panel , secondary-content . Footer
#Footer 包括网站的一些额外信息内容,这一部分你要能够取名为: copyright .