CSS实例教程:词义化方式取代构造化方式

日期:2020-12-10 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序


今日脚本制作之家想根据剖析1个时兴3栏合理布局中的必要元素,来为大伙儿解读有关应用词义化方式取代构造化方式来取名CSS类的提议和具体指导。
 CSS编码的取名国际惯例1直是大伙儿热门探讨的话题。今日脚本制作之家想根据剖析1个时兴3栏合理布局中的必要元素,来为大伙儿解读有关应用词义化方式取代构造化方式来取名CSS类的提议和具体指导。 CSS类取名的词义化VS构造化方法
  1般而言,CSS类名的词义化申明方法理应考虑到你的网页页面中某个相对性元素的”作用”,单独于它的”精准定位”或准确的特点(构造化方法)。像left-bar, red-text, small-title…这些都属于构造化界定的事例。
让大家看看下面这个事例:

  …而如今大家想把网页页面中的元素替换1下部位,假如你应用的是构造化方法(1),那末你就要把全部CSS类名再次开展界定,由于它们的部位变了。在合理布局(3)中,大家看到元素都倒转了:right-bar 如今变成 “left-bar”,而left-content 变成 “right-content”。假如你应用词义化方法则防止了此类难题。

  换句话说,应用词义化方法的话,你在改动网站合理布局的情况下能够仅仅改动有关CSS类的特性便可,而无需改动它们的类名了,假如网站的编码很巨大,这将节约很多的時间。
  脚本制作之家会常常升级前端开发开发设计/网页页面设计方案等有关技术性及实例教程文章内容,欢迎立即访问脚本制作之家的全新实例教程及資源。 有关词义化的1些提议:
  在刚开始以前,我想强烈推荐两种简易的撰写较好的CSS编码的具体指导战略方针:
    为CSS类名界定的情况下,尽可能应用小写字母,假如有两个以上的单词,在每一个单词之间应用”-”符或单词首字母大写(第1个单词以外)。如:”main-content”或”mainContent”。 提升CSS编码,仅建立重要关键的CSS类并再次为子元素应用合乎HTML规范的标识(h1, h2, p, ul, li, blockquote,…),比如,不必应用这类哦你那个方法:

<div class=”main”>
<div class=”main-title”>…</div>
<div class=”main-paragraph”>…</div>
</div>

而要这样写:

<div class=“main”>
<h1></h1>
<p></p>
</div>
3栏合理布局中应用词义化方法的事例
  让大家来根据这个简易的事例解读1下怎样为經典的3栏合理布局应用词义化方法取名:

   应用词义化方法为CSS取名能够像这样:

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