增强你前端水平的

CSS进阶:提升你前端水平的 4 个技巧

2016/07/06 · CSS

本文由 伯乐在线 –
小谢
翻译。未经许可,禁止转发!
英文出处:Jonathan Z.
White。欢迎参加翻译组。

翻译注:随着 Node.js 、react-native
等技巧的不止出新,和网络行业的创业的无独有偶,了解些前端知识,成为全栈攻城师,疾速的产出原型,体现你的新意,对程序员,特别是在创业的程序员来说,越来越首要,上边大家就跟随有名海外开发者网站上的热推小说《Leveling
up in CSS》,从升高你的CSS技巧开始。

美高梅开户网址 1

翻译注:随着 Node.js 、react-native
等技能的无休止涌出,和网络行业的创业的习以为常,驾驭些前端知识,成为全栈攻城师,火速的产出原型,浮现你的创意,对程序员,特别是在创业的程序员来说,越来越首要,下边大家就紧跟着闻明外国开发者网站上的热推小说《Leveling
up in CSS》,从进步你的CSS技巧开首。

CSS进阶:进步你前端水平的 4 个技巧,css进阶

译者注:随着 Node.js 、react-native 等技术的不断出现,和互联网行业的创业的层出不穷,了解些前端知识,成为全栈攻城师,快速的产出原型,展示你的创意,对程序员,尤其是在创业的程序员来说,越来越重要,下面我们就跟随著名国外开发者网站上的热推文章《Leveling up in CSS》,从提升你的CSS技巧开始。

 
美高梅开户网址 2

CSS
在刚开首读书的时候看起来非常简单。毕竟,它独自就是些体制而已,事实上是如此啊?

可是,随着你的无休止询问。很快,你会意识 CSS
没你想象的那么不难,它复杂且有深度。

盘活那四件事情,能让你在大规模利用 CSS
的时候保障代码的健壮性:使用分外的语义,模块化,选择统一的命名规范,服从单一功效原则。

采纳方便的语义

在 HTML 和 CSS
编程中有语义标注的定义。语义是指单词的意思和她们间的关联。在 HTML
编程中,意味着你需要使用一个适度的价签名字来标记。下边是一个经文的例证。

 <!-- bad --> 
 <div class = ”footer” </div>
 <!-- good -->
 <footer></footer>

富有语义的 HTML 是至极简单明确的。另一方面,富有语义的 CSS
则是更抽象和不合理的。编写富有语义的 CSS
意味着在甄选项目标时候,类名要传达出布局和功效消息。类名要很简单被了解。确保它们并非太现实、太新鲜。那样,你就可以复用它了。

 
美高梅开户网址 3

为了演说怎样是一个妙不可言的类名,请看那些简化了的 Medium 网站的 CSS 例子。

<div  class ="stream">
 <div  class="streamItem">
 <article  class="postArticle">
  <div  class = "postArticle-content">
<!-- content -->
 </div>
 </article>
 </div>
</div>

由此这一个代码,你能够立时识别出它们的构造、效能和含义。父节点的类名是
stream ,内容是一个篇章列表。它的子节点的类名是 streamItem
,内容是小说列表中的一篇具体的小说。那使大家很不难的问询到父节点和子节点之间的关联。并且,那些类可以在每个有小说功能的页面中选拔。

你可以像阅读一本书一样读 HTML 和
CSS。它会给你讲一个传说。通过传说你可以精通传说中的各种角色和他们中间的涉及。语义丰硕的
CSS 代码容易精通,更有益于维护。

尽管你想进一步明白语义相关的故事情节,看看 《怎么拥有语义的为类命名》、《CSS
命名不不难》 和 《富有语义和易于辨别(的代码命名)》,再看 《关于 HTML
命名和前端架构》。

模块化

在这么些充满了组件库(以 React
为例)的时期,模块化就是王者。组件就是由一度解构了的接口创建的可构成的模块。下边是一个Product
Hunt(一种公布好的创业商机的网站)前端页面。作为练兵,让我们将这么些页面分解成一雨后春笋的零部件。

 
美高梅开户网址 4

每一种颜色框代表一个零件,stream 节点下分为众三个 stream item 子节点。

 <div class = "stream" >
 <div class = "streamItem" >
 <!-- product info -->
 </div>
 </div>

绝一大半零件都可以解释为更小的零部件。

 
美高梅开户网址 5

各种 stream item 组件都有一个缩略图和一个风味的成品新闻。

 <!-- STREAM COMPONENT -->
 <div class = "stream" >
 <div  class = "streamItem" >
 <!-- POST COMPONENT -->
 <div  class = "post" >
 <img  src = "thumbnail.png" class = "postThumbnail" />
 <div  class = "content" >
 <!-- product info -->
 </div>
 </div>
 </div>
 </div>

出于 stream 组件和它的子控件是全然独立的,你可以很简单的调动恐怕更换
post 组件,并且这不会对 stream 组件暴发任何影响。

动用组件的合计将会使你的代码解耦。解耦的代码更多,你的类之间的看重就越低。那会让你的代码更便于修改,并且使您的代码更长日子的行事下去而不用修改它。

 
美高梅开户网址 6

组件驱动设计

模块化你的 CSS
时,首先将您的设计分解成多少个零件。你可以使用纸和笔,也足以采取类似
Illustrator 大概 Sketch
那类的软件。确定你就要如何命名那一个组件,同时清理各类零部件之间的关系。

开卷愈多关于 CSS 组件驱动的篇章,详见《CSS
建构:可增添和模块化处理》、《使用 Sass 编写模块化的
CSS》和《模块化你的前端代码——编写高可爱惜和条理清晰的代码》。

应用统一的命名规范

方今有几十个不相同版本的 CSS
命名规范。有些人对她们拔取的命名规范极其笃定,认为他俩的比别人的更好。事实上,区其余人欣赏差距的命名规范。我听到的最好的指出是:拔取你认为最合适的命名规范。

上面简单列举一下常用的命名规范:

  • Object oriented CSS OOCSS

  • Block element modifier (BEM)

  • Scalable and modular architecture for CSS (SMACSS)

  • Atomic

自己最欣赏的命名规范是 BEM。BEM
代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄国的一对一于谷歌(谷歌(Google))的检索引擎,为了消除他们
CSS 代码库中的缩放难点而提议了它(它指BEM)。

 
美高梅开户网址 7

BEM 是一个无限简约——又最为严谨——的命名规范。

 .block  {}
 .block__element  {}
 .block--modifier  {}

块(Blocks)代表高级其他类。元素(Elements)是块的子模块。修饰符(modifiers)代表不一致的气象。

 
美高梅开户网址 8

 <div class = "search" >
 <input  type= "search__btn search__btn--active"  />
 </div>

在地点的演示中, search 是块(block),search
button是它的要素(element)。如若你想要更改按钮的情事,大家得以为按钮增添一个修饰符,例如
active 。

有关命名规范要切记的一件事是,无论你欣赏哪类命名规范,你会日常继承只怕工作在分裂专业的代码库上。请敞春风得意扉去上学新的专业,用分歧的盘算去思辨
CSS 。

您可以在《深切学习 BEM 语法》、《BEM 101》和《BEM 简介》上收看愈来愈多关于
BEM
的信息。想要通晓不一致的命名规范,参见《OOCSS、ACSS、BEM、SMACSS:这么些是怎么?我该用哪些?》。

安分守己单一作用原则

单纯性功效原则规定逐个模块和类都应该有一个十足的效率,并且该意义应该由那么些类完全封装起来。

在 CSS 中,单一功能原则代表每一段代码、类和模块只做一件事。当我们付出
CSS 文件时,那象征逐个独立的组件(例如轮播效果和导航栏)都应当有谈得来的
CSS 文件。

 /
 components
 |-  carousel
 |- |-  carousel .css
 |- |-  carousel.partial . html
 |- |-  carousel . js
 |-  nav
 |- |-  nav . css
 |- |- nav .partial . html
 |- |-  nav . js

其余一个普遍的团伙文件的艺术是按照效益将文件分组。举个栗子,如上边所示,所有和轮播效果组件有关的公文都被分门别类到了一起。接纳那种格局得以让您更便于的找到相关文件。

除了对组件的样式举行分离之外,最好使用单一成效原则对全局样式也开展分离。

 / base
 |-  application . css
 |-  typography . css
 |-  colors . css
 |- grid . css

在那些例子中,逐个相关的体裁被分别到自身的样式文件中。那样,若是您想要修改样式中的颜色,那么你将会很简单的找到它。

随便你利用哪个种类艺术协会文件结构,尽量在支配的时候参考单一功用原则。一旦有某个文件初始变的重合,那么考虑依照逻辑功效将它分为三个部分。

越来越多关于社团文件结构和 CSS 架构的稿子,详见《Sass 审美
1:架构和集团体制文件》和《可扩张和可保证的 CSS 架构》。

当单一效用原则应用于您的每种 CSS
类拔取器中时,那代表逐个类选用器都怀有唯一的功能。换句话说,要依据差距关怀点将样式分离到差别的类选取器中。上边是个经典的例证:

 .splash {
background : #f2f2f2 ;
 color :#fffff ;
 margin : 20px ;
 padding: 30px;
 border-radius : 4px;
 position : absolute ; 
 top : 0 ;
 right: 0 ;
 bottom : 0 ;
 left: 0 ;
 }

在上边的例子中,我们将关心点耦合了。splash
这些类不但含有了我的体制和逻辑,同时也隐含了它的子节点的。为了消除这几个标题,大家得以将那段代码分离为八个新的类。

 .splash {
   position: absolute;
   top: 0;
  right: 0;
   bottom: 0;
  left: 0;
 }

到现在大家有 splash 和 splash content 八个类。我们得以将 splash
作为一个形似的全屏类,它可以具有任何子节点。所有子节点关心的个性,都在
splash content 中,与父节点的特性是一点一滴解耦的。

你能够通过阅读下列文章进一步了然单一功用原则在样式表和类中的应用。《单一功效原则在
CSS 中的应用》和《单一效能原则》。

简单来讲胜过复杂

一经你问其余一个得逞的前端开发工程师恐怕 CSS
架构师,他们会告知您,他们根本不曾对协调的代码完全满足。写好 CSS
是一个不断迭代的进度。从不难开头,遵循基本的 CSS
规则和样式指南,然后不断迭代。

自个儿很想知道您的 CSS
学习之路。你喜欢的命名规范是什么?你是什么协会你的代码文件的?你能够随时通过留言或然在
Tweet 上告知我。

我有一个前端学习交流QQ群:328058344 如果你在学习前端的过程中遇到什么问题,欢迎来我的QQ群提问,群里每天还会更新一些学习资源。禁止闲聊,非喜勿进。

4 个技巧,css进阶
译者注:随着 Node.js 、react-native
等技巧的不断出现,和互连网行业的创业的习以为常,精通…

翻译注:随着 Node.js 、react-native
等技能的接踵而至 蜂拥而至出新,和互连网行业的创业的屡见不鲜,了然些前端知识,成为全栈攻城师,快捷的出现原型,显示你的新意,对程序员,越发是在创业的程序员来说,越来越首要,下面大家就跟随盛名国外开发者网站上的热推作品《Leveling
up in CSS》,从进步你的CSS技巧初步。

CSS
在刚开始上学的时候看起来分外简单。终归,它只是就是些体制而已,事实上是那般吗?

然则,随着你的穿梭询问。很快,你会发觉 CSS
没你想象的那么粗略,它复杂且有深度。

盘活那四件事情,能让你在大规模利用 CSS
的时候保证代码的健壮性:使用非凡的语义,模块化,拔取统一的命名规范,遵守单一功用原则。

美高梅开户网址 9

 

动用合适的语义

在 HTML 和 CSS
编程中有语义标注的概念。语义是指单词的意义和她们间的涉及。在 HTML
编程中,意味着你须要选用一个合适的竹签名字来标记。上面是一个经文的事例。

XHTML

<!– bad –> <div class=”footer”></div> <!– good
–> <footer></footer>

1
2
3
4
<!– bad –>
<div class=”footer”></div>
<!– good –>
<footer></footer>

拥有语义的 HTML 是非常简单明确的。另一方面,富有语义的 CSS
则是更抽象和勉强的。编写富有语义的 CSS
意味着在挑选品种的时候,类名要传达出结构和功力新闻。类名要很简单被明白。确保它们并非太现实、太特殊。那样,你就足以复用它了。

美高梅开户网址 10

为了讲演如何是一个良好的类名,请看那些简化了的 Medium 网站的 CSS 例子。

增强你前端水平的。XHTML

<div class=”stream”> <div class=”streamItem”> <article
class=”postArticle”> <div class=”postArticle-content”> <!–
content –> </div> </article> </div> </div>

1
2
3
4
5
6
7
8
9
<div class="stream">
  <div class="streamItem">
    <article class="postArticle">
      <div class="postArticle-content">
        <!– content –>
      </div>
    </article>
  </div>
</div>

美高梅开户网址 ,通过那几个代码,你可以马上识别出它们的构造、效能和含义。父节点的类名是
stream ,内容是一个小说列表。它的子节点的类名是 streamItem
,内容是小说列表中的一篇具体的稿子。那使大家很简单的询问到父节点和子节点之间的关联。并且,那些类可以在每一种有作品效能的页面中选取。

你可以像阅读一本书一样读 HTML 和
CSS。它会给您讲一个传说。通过轶事你可以通晓故事中的各种角色和她们之间的涉嫌。语义丰裕的
CSS 代码不难驾驭,更有利维护。

一经你想进一步询问语义相关的内容,看看
《怎么拥有语义的为类命名》、《CSS
命名不简单》

《富有语义和易于辨认(的代码命名)》,再看
《关于 HTML
命名和前端架构》。

CSS
在刚初步学习的时候看起来万分简单。毕竟,它独自就是些体制而已,事实上是这么吧?

美高梅开户网址 11

模块化

在那一个充满了组件库(以 React
为例)的时期,模块化就是王者。组件就是由曾经解构了的接口创制的可结合的模块。下边是一个Product
Hunt(一种公布好的网络项目标网站)前端页面。作为练兵,让大家将以此页面分解成一层层的机件。

美高梅开户网址 12

逐个颜色框代表一个零件,stream 节点下分为许七个 stream item 子节点。

XHTML

<div class=”stream”> <div class=”streamItem”> <!–
product info –> </div> </div>

1
2
3
4
5
<div class="stream">
  <div class="streamItem">
    <!– product info –>
  </div>
</div>

大部零件都可以分解为更小的零部件。

美高梅开户网址 13

各个 stream item 组件都有一个缩略图和一个风味的成品音信。

XHTML

<!– STREAM COMPONENT –> <div class=”stream”> <div
class=”streamItem”> <!– POST COMPONENT –> <div
class=”post”> <img src=”thumbnail.png” class=”postThumbnail”/>
<div class=”content”> <!– product info –> </div>
</div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
<!– STREAM COMPONENT –>
<div class="stream">
  <div class="streamItem">
    <!– POST COMPONENT –>
    <div class="post">
      <img src="thumbnail.png" class="postThumbnail"/>
      <div class="content">
        <!– product info –>
      </div>
    </div>
  </div>
</div>

鉴于 stream 组件和它的子控件是截然独立的,你可以很简单的调整仍然转移
post 组件,并且那不会对 stream 组件爆发其余影响。

行使组件的思想将会使您的代码解耦。解耦的代码越来越多,你的类之间的依靠就越低。那会让您的代码更便于修改,并且使你的代码更长日子的做事下去而不用修改它。

美高梅开户网址 14

组件驱动设计

模块化你的 CSS
时,首先将您的规划分解成多少个零件。你可以使用纸和笔,也可以应用类似
Illustrator 恐怕 Sketch
那类的软件。确定你就要怎么着命名这几个零部件,同时清理各类零部件之间的涉及。

开卷越多关于 CSS 组件驱动的小说,详见《CSS
建构:可扩张和模块化处理》、《使用
Sass 编写模块化的
CSS》和《模块化你的前端代码——编写高可保证和条理清晰的代码》。

唯独,随着你的持续询问。很快,你会发觉 CSS
没你想像的那么简单,它复杂且有深度。

CSS
在刚早先攻读的时候看起来万分不难。毕竟,它只是就是些体制而已,事实上是这么呢?

选拔统一的命名规范

目前有几十个不等版本的 CSS
命名规范。有些人对他们选用的命名规范极其笃定,认为他们的比旁人的更好。事实上,分裂的人喜爱差其他命名规范。我听见的最好的指出是:选用你认为最合适的命名规范。

上边简单列举一下常用的命名规范:

  • Object oriented CSS
    OOCSS
  • Block element modifier
    (BEM)
  • Scalable and modular architecture for CSS
    (SMACSS)
  • Atomic

自个儿最喜爱的命名规范是 BEM。BEM
代表块(block)、成分(element)和修饰符(modifier)。Yandex,在俄联邦的一对一于谷歌(谷歌)的搜索引擎,为了消除他们
CSS 代码库中的缩放难题而指出了它(它指BEM)。

美高梅开户网址 15

BEM 是一个最为简约——又最为狂暴——的命名规范。

CSS

.block {} .block__element {} .block–modifier {}

1
2
3
.block {}
.block__element {}
.block–modifier {}

块(Blocks)代表高级其他类。成分(Elements)是块的子模块。修饰符(modifiers)代表不相同的事态。

美高梅开户网址 16

XHTML

<div class=”search”> <input type=”search__btn
search__btn–active” /> </div>

1
2
3
<div class="search">
<input type="search__btn search__btn–active" />
</div>

在下边的言传身教中, search 是块(block),search
button是它的成分(element)。如若您想要更改按钮的动静,我们可以为按钮扩充一个修饰符,例如
active 。

至于命名规范要铭记在心的一件事是,无论你欢快哪一类命名规范,你会时常继承只怕办事在差距标准的代码库上。请敞喜笑颜开灵去读书新的正儿八经,用差距的沉思去思辨
CSS 。

你可以在《长远学习 BEM
语法》、《BEM
101》和《BEM
简介》上观望越来越多关于 BEM
的音信。想要领悟不同的命名规范,参见《OOCSS、ACSS、BEM、SMACSS:那么些是何等?我该用哪些?》。

办好那四件工作,能让你在大规模利用 CSS
的时候保障代码的健壮性:使用方便的语义,模块化,接纳统一的命名规范,遵守单一功效原则。

而是,随着你的缕缕询问。很快,你会意识 CSS
没你想像的那么粗略,它复杂且有深度。

绳趋尺步单一作用原则

纯净成效原则确定每一种模块和类都应该有一个十足的听从,并且该作用应该由这些类完全封装起来。

在 CSS 中,单一成效原则代表每一段代码、类和模块只做一件事。当我们付出
CSS 文件时,那象征每个独立的机件(例如轮播效果和导航栏)都应当有和好的
CSS 文件。

/components |- carousel |- |- carousel.css |- |- carousel.partial.html
|- |- carousel.js |- nav |- |- nav.css |- |- nav.partial.html |- |-
nav.js

1
2
3
4
5
6
7
8
9
/components
  |- carousel
  |- |- carousel.css
  |- |- carousel.partial.html
  |- |- carousel.js
  |- nav
  |- |- nav.css
  |- |- nav.partial.html
  |- |- nav.js

其余一个大规模的社团文件的格局是依据效益将文件分组。举个栗子,如上边所示,所有和轮播效果组件有关的文书都被分类到了伙同。选用那种措施可以让你更易于的找到有关文书。

除开对组件的体裁进行分离之外,最好使用单一功效原则对全局样式也展开分离。

/base |- application.css |- typography.css |- colors.css |- grid.css

1
2
3
4
5
/base
  |- application.css
  |- typography.css
  |- colors.css
  |- grid.css

在这几个事例中,每种相关的体裁被分别到自个儿的样式文件中。那样,假使你想要修改样式中的颜色,那么您将会很简单的找到它。

随便你利用哪一种方法协会文件结构,尽量在控制的时候参考单一作用原则。一旦有某个文件开头变的重合,那么考虑根据逻辑功效将它分成几个部分。

愈多关于团社团文件结构和 CSS 架构的作品,详见《Sass 审美
1:架构和集团体制文件》和《可扩张和可保险的
CSS
架构》。

当单一功用原则应用于您的逐个 CSS
类选用器中时,那代表各种类选拔器都抱有唯一的机能。换句话说,要基于差异关心点将样式分离到差其他类接纳器中。上边是个经典的例子:

CSS

.splash { background: #f2f2f2; color: #fffff; margin: 20px; padding:
30px; border-radius: 4px; position: absolute; top: 0; right: 0; bottom:
0; left: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
.splash {
  background: #f2f2f2;
  color: #fffff;
  margin: 20px;
  padding: 30px;
  border-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

在上边的事例中,大家将关心点耦合了。splash
那一个类不但含有了自家的样式和逻辑,同时也饱含了它的子节点的。为了消除那几个题材,大家得以将这段代码分离为五个新的类。

CSS

.splash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

1
2
3
4
5
6
7
.splash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

CSS

.splash__content { background: #f2f2f2; color: #fffff; padding:
30px; border-radius: 4px; }

1
2
3
4
5
6
.splash__content {
  background: #f2f2f2;
  color: #fffff;
  padding: 30px;
  border-radius: 4px;
}

当今我们有 splash 和 splash content 三个类。我们得以将 splash
作为一个相似的全屏类,它可以具有任何子节点。所有子节点关心的天性,都在
splash content 中,与父节点的属性是一点一滴解耦的。

您能够透过阅读下列文章更是询问单一成效原则在样式表和类中的应用。《单一功效原则在
CSS
中的应用》和《单一功能原则》。

行使方便的语义

搞好那四件事情,能让你在大规模利用 CSS
的时候有限援助代码的健壮性:使用合适的语义,模块化,选择统一的命名规范,遵守单一效能原则。

简单的说胜过复杂

假若你问其他一个得逞的前端开发工程师或然 CSS
架构师,他们会告知您,他们平昔没有对协调的代码完全满足。写好 CSS
是一个不断迭代的进度。从简单开首,遵守基本的 CSS
规则和体制指南,然后不断迭代。

自个儿很想知道您的 CSS
学习之路。你喜欢的命名规范是什么?你是什么协会你的代码文件的?你能够随时通过留言或许在Tweet上告诉我。

除此以外:倘若你喜欢那篇小说,不妨点击下推荐按钮,大概把它分享给您的情侣,那样会更棒。

要是你想要通晓更加多,你能够关心本人的
Twitter
,我会平日的在地点分享部分有关安排、前端开发、机器人和机械学习的故事情节。

打赏协助自个儿翻译越多好文章,谢谢!

打赏译者

在 HTML 和 CSS
编程中有语义标注的定义。语义是指单词的意思和她们间的涉及。在 HTML
编程中,意味着你须求运用一个合适的标签名字来标记。上边是一个经文的例子。

行使合适的语义

打赏协理我翻译越多好作品,感谢!

任选一种支付办法

美高梅开户网址 17
美高梅开户网址 18

1 赞 12 收藏
评论

有着语义的 HTML 是相当不难明确的。另一方面,富有语义的 CSS
则是更抽象和不合理的。编写富有语义的 CSS
意味着在甄选类其他时候,类名要传达出社团和出力音信。类名要很简单被清楚。确保它们并非太现实、太新鲜。那样,你就足以复用它了。

在 HTML 和 CSS
编程中有语义标注的概念。语义是指单词的意思和她们间的关系。在 HTML
编程中,意味着你须求选择一个老少咸宜的标签名字来标记。下边是一个经典的例子。

关于小编:小谢

美高梅开户网址 19

懒懒的程序员~
个人主页 ·
我的篇章 ·
24 ·
 

美高梅开户网址 20

美高梅开户网址 21

 <!-- bad --> 
 <div class = ”footer” </div>
 <!-- good -->
 <footer></footer>

为了演说怎么着是一个可观的类名,请看这一个简化了的 Medium 网站的 CSS 例子。

拥有语义的 HTML 是非凡简单明确的。另一方面,富有语义的 CSS
则是更抽象和勉强的。编写富有语义的 CSS
意味着在甄选种类的时候,类名要传达出社团和效劳音信。类名要很简单被清楚。确保它们并非太现实、太新鲜。那样,你就足以复用它了。

因而这几个代码,你可以即时识别出它们的构造、效用和含义。父节点的类名是
stream ,内容是一个小说列表。它的子节点的类名是 streamItem
,内容是小说列表中的一篇具体的稿子。那使大家很不难的刺探到父节点和子节点之间的关联。并且,这几个类可以在每个有文章功用的页面中选拔。

 

您可以像阅读一本书一样读 HTML 和
CSS。它会给您讲一个典故。通过轶闻你可以了解故事中的每种剧中人物和他们之间的涉嫌。语义丰富的
CSS 代码不难了然,更有益维护。

美高梅开户网址 22

一经你想进一步精晓语义相关的始末,看看 《怎么拥有语义的为类命名》、《CSS
命名不简单》 和 《富有语义和易于辨别(的代码命名)》,再看 《关于 HTML
命名和前端架构》。

为了讲演怎么着是一个绝妙的类名,请看这么些简化了的 Medium 网站的 CSS 例子。

模块化

<div  class ="stream">
 <div  class="streamItem">
 <article  class="postArticle">
  <div  class = "postArticle-content">
<!-- content -->
 </div>
 </article>
 </div>
</div>

在那个充满了组件库(以 React
为例)的一时,模块化就是王者。组件就是由曾经解构了的接口创制的可组成的模块。下边是一个Product
Hunt(一种发表好的创业好项目的网站)前端页面。作为练兵,让大家将以此页面分解成一多级的机件。

透过那些代码,你可以马上识别出它们的布局、功用和含义。父节点的类名是
stream ,内容是一个篇章列表。它的子节点的类名是 streamItem
,内容是作品列表中的一篇具体的小说。那使大家很简单的垂询到父节点和子节点之间的涉嫌。并且,这几个类可以在每个有文章作用的页面中行使。

美高梅开户网址 23

您可以像阅读一本书一样读 HTML 和
CSS。它会给您讲一个故事。通过传说你可以驾驭典故中的各个角色和她俩之间的关联。语义充分的
CSS 代码不难驾驭,更有利于维护。

每一个颜色框代表一个零件,stream 节点下分为无数个 stream item 子节点。

万一你想进一步精晓语义相关的内容,看看 《怎么拥有语义的为类命名》、《CSS
命名不不难》 和 《富有语义和简单辨认(的代码命名)》,再看 《关于 HTML
命名和前端架构》。

大部组件都得以分解为更小的零部件。

模块化

美高梅开户网址 24

在这些充满了组件库(以 React
为例)的一代,模块化就是王者。组件就是由一度解构了的接口创造的可组合的模块。上面是一个Product
Hunt(一种发布好的创业小项目标网站)前端页面。作为练兵,让我们将那个页面分解成一文山会海的零件。

每个 stream item 组件都有一个缩略图和一个特点的出品消息。

 

由于 stream 组件和它的子控件是一点一滴独立的,你可以很简单的调动恐怕更换
post 组件,并且那不会对 stream 组件发生别的影响。

美高梅开户网址 25

使用组件的思辨将会使您的代码解耦。解耦的代码更加多,你的类之间的正视就越低。这会让你的代码更便于修改,并且使您的代码更长日子的劳作下去而不用修改它。

各种颜色框代表一个零部件,stream 节点下分为许八个 stream item 子节点。

美高梅开户网址 26

 <div class = "stream" >
 <div class = "streamItem" >
 <!-- product info -->
 </div>
 </div>

零件驱动设计

大部分零件都得以分解为更小的零件。

模块化你的 CSS
时,首先将你的布置分解成五个零件。你可以使用纸和笔,也得以选取类似
Illustrator 大概 Sketch
这类的软件。确定你就要如何命名这个零件,同时清理各类零部件之间的关系。

 

开卷越来越多关于 CSS 组件驱动的小说,详见《CSS
建构:可扩充和模块化处理》、《使用 Sass 编写模块化的
CSS》和《模块化你的前端代码——编写高可爱抚和条理清晰的代码》。

美高梅开户网址 27

使用统一的命名规范

各个 stream item 组件都有一个缩略图和一个特征的产品音信。

此时此刻有几十个例外版本的 CSS
命名规范。有些人对他们挑选的命名规范极其笃定,认为她们的比人家的更好。事实上,差其余人喜好不一样的命名规范。我听到的最好的提出是:接纳你以为最合适的命名规范。

 <!-- STREAM COMPONENT -->
 <div class = "stream" >
 <div  class = "streamItem" >
 <!-- POST COMPONENT -->
 <div  class = "post" >
 <img  src = "thumbnail.png" class = "postThumbnail" />
 <div  class = "content" >
 <!-- product info -->
 </div>
 </div>
 </div>
 </div>

上面不难列举一下常用的命名规范:

鉴于 stream 组件和它的子控件是一点一滴独立的,你可以很不难的调动如故转移
post 组件,并且那不会对 stream 组件爆发任何影响。

Object oriented CSS OOCSS

运用组件的商量将会使您的代码解耦。解耦的代码越来越多,你的类之间的爱慕就越低。那会让您的代码更便于修改,并且使你的代码更长日子的劳作下去而不用修改它。

Block element modifier (BEM)

 

Scalable and modular architecture for CSS (SMACSS)

美高梅开户网址 28

Atomic

组件驱动设计

自我最欣赏的命名规范是 BEM。BEM
代表块(block)、成分(element)和修饰符(modifier)。Yandex,在俄罗斯的一定于谷歌(谷歌(Google))的追寻引擎,为了缓解他们
CSS 代码库中的缩放问题而指出了它(它指BEM)。

模块化你的 CSS
时,首先将你的布署性分解成多个零部件。你可以使用纸和笔,也得以利用类似
Illustrator 只怕 Sketch
那类的软件。确定你就要怎么着命名那个零件,同时清理各种零部件之间的关联。

美高梅开户网址 29

开卷越来越多关于 CSS 组件驱动的篇章,详见《CSS
建构:可扩张和模块化处理》、《使用 Sass 编写模块化的
CSS》和《模块化你的前端代码——编写高可保证和条理清晰的代码》。

BEM 是一个非常简约——又最为严俊——的命名规范。

动用统一的命名规范

.block{}

眼下有几十个不等版本的 CSS
命名规范。有些人对他们挑选的命名规范极其笃定,认为她们的比旁人的更好。事实上,区其外人喜好不一致的命名规范。我听见的最好的指出是:接纳你认为最合适的命名规范。

.block__element{}

下边简单列举一下常用的命名规范:

.block–modifier{}

  • Object oriented CSS OOCSS

  • Block element modifier (BEM)

  • Scalable and modular architecture for CSS (SMACSS)

  • Atomic

块(Blocks)代表高级其他类。元素(Elements)是块的子模块。修饰符(modifiers)代表区其余气象。

自家最喜爱的命名规范是 BEM。BEM
代表块(block)、成分(element)和修饰符(modifier)。Yandex,在俄国的也等于谷歌(Google)的追寻引擎,为了缓解他们
CSS 代码库中的缩放难题而指出了它(它指BEM)。

美高梅开户网址 30

 

在地点的演示中, search 是块(block),search
button是它的因素(element)。若是您想要更改按钮的处境,大家可以为按钮扩张一个修饰符,例如
active 。

美高梅开户网址 31

至于命名规范要铭记的一件事是,无论你兴奋哪个种类命名规范,你会时不时继承或者工作在不一样专业的代码库上。请敞喜笑颜开灵去上学新的正规化,用不一样的思索去思维
CSS 。

BEM 是一个无比简约——又极其严格——的命名规范。

您能够在《深远学习 BEM 语法》、《BEM 101》和《BEM 简介》上来看愈来愈多关于
BEM
的新闻。想要明白差距的命名规范,参见《OOCSS、ACSS、BEM、SMACSS:这个是哪些?我该用哪个?》。

 .block  {}
 .block__element  {}
 .block--modifier  {}

按照单一功效原则

块(Blocks)代表高级其他类。成分(Elements)是块的子模块。修饰符(modifiers)代表差别的景况。

纯净作用原则确定每一种模块和类都应该有一个纯粹的效能,并且该意义应该由那些类完全封装起来。

 

在 CSS 中,单一成效原则代表每一段代码、类和模块只做一件事。当大家提交
CSS 文件时,那表示每一个独立的零件(例如轮播效果和导航栏)都应当有和好的
CSS 文件。

美高梅开户网址 32

/components

 <div class = "search" >
 <input  type= "search__btn search__btn--active"  />
 </div>

|-carousel

在上边的演示中, search 是块(block),search
button是它的成分(element)。借使您想要更改按钮的动静,大家可以为按钮增添一个修饰符,例如
active 。

|- |-carousel.css

至于命名规范要切记的一件事是,无论你喜爱哪一种命名规范,你会平时继承恐怕工作在差距专业的代码库上。请敞和颜悦色灵去学习新的专业,用区其他思辨去思维
CSS 。

|- |-carousel.partial.html

您可以在《深切学习 BEM 语法》、《BEM 101》和《BEM 简介》上看出越多关于
BEM
的新闻。想要精通不相同的命名规范,参见《OOCSS、ACSS、BEM、SMACSS:那个是怎么?我该用哪个?》。

|- |-carousel.js

依照单一成效原则

|-nav

纯净效用原则确定各种模块和类都应该有一个单纯的功效,并且该功效应该由这么些类完全封装起来。

|- |-nav.css

在 CSS 中,单一成效原则代表每一段代码、类和模块只做一件事。当大家提交
CSS 文件时,那意味着各种独立的零件(例如轮播效果和导航栏)都应当有友好的
CSS 文件。

|- |-nav.partial.html

 /
 components
 |-  carousel
 |- |-  carousel .css
 |- |-  carousel.partial . html
 |- |-  carousel . js
 |-  nav
 |- |-  nav . css
 |- |- nav .partial . html
 |- |-  nav . js

|- |-nav.js

别的一个常见的团体文件的艺术是规行矩步效益将文件分组。举个栗子,如上边所示,所有和轮播效果组件有关的公文都被分门别类到了合伙。选用那种方法可以让您更便于的找到有关文书。

除此以外一个常见的团伙文件的艺术是按照效益将文件分组。举个栗子,如上边所示,所有和轮播效果组件有关的文本都被分类到了一头。拔取那种办法得以让您更便于的找到相关文件。

而外对组件的体裁进行分离之外,最好使用单一功用原则对全局样式也展开分离。

除此之外对组件的体裁进行分离之外,最好使用单一功效原则对全局样式也拓展分离。

 / base
 |-  application . css
 |-  typography . css
 |-  colors . css
 |- grid . css

/base

在那么些事例中,逐个相关的体裁被分开到温馨的样式文件中。那样,倘使你想要修改样式中的颜色,那么您将会很简单的找到它。

|-application.css

不管你采用哪一种办法社团文件结构,尽量在决定的时候参考单一作用原则。一旦有某个文件初叶变的重叠,那么考虑根据逻辑效能将它分为两个部分。

|-typography.css

越来越多关于团社团文件结构和 CSS 架构的小说,详见《Sass 审美
1:架构和集体体制文件》和《可增添和可爱戴的 CSS 架构》。

|-colors.css

当单一功用原则应用于你的每个 CSS
类选取器中时,那意味每一种类选择器都拥有唯一的效益。换句话说,要依据分裂关怀点将样式分离到不相同的类选取器中。下面是个经典的事例:

|-grid.css

 .splash {
background : #f2f2f2 ;
 color :#fffff ;
 margin : 20px ;
 padding: 30px;
 border-radius : 4px;
 position : absolute ; 
 top : 0 ;
 right: 0 ;
 bottom : 0 ;
 left: 0 ;
 }

在那个例子中,各种相关的体裁被分别到本人的样式文件中。这样,假设您想要修改样式中的颜色,那么你将会很不难的找到它。

在地点的例证中,大家将关心点耦合了。splash
这么些类不但含有了自我的样式和逻辑,同时也饱含了它的子节点的。为了缓解那些题材,大家可以将那段代码分离为多少个新的类。

不管你使用哪类艺术社团文件结构,尽量在决定的时候参考单一功效原则。一旦有某个文件开端变的重叠,那么考虑根据逻辑功效将它分成多少个部分。

 .splash {
   position: absolute;
   top: 0;
  right: 0;
   bottom: 0;
  left: 0;
 }

越多关于团体文件结构和 CSS 架构的篇章,详见《Sass 审美
1:架构和团社团体制文件》和《可扩张和可珍惜的 CSS 架构》。

近期大家有 splash 和 splash content 四个类。大家可以将 splash
作为一个相似的全屏类,它可以具有任何子节点。所有子节点关怀的脾气,都在
splash content 中,与父节点的属性是一点一滴解耦的。

当单一功能原则应用于您的各种 CSS
类选拔器中时,那意味各个类采用器都有所唯一的成效。换句话说,要基于不一样关怀点将样式分离到区其余类选用器中。上边是个经典的例子:

您可以透过阅读下列作品进一步了然单一作用原则在样式表和类中的应用。《单一作用原则在
CSS 中的应用》和《单一作用原则》。

.splash{

概括胜过复杂

background:#f2f2f2;

假使你问其他一个打响的前端开发工程师或然 CSS
架构师,他们会告诉你,他们平昔不曾对本身的代码完全令人满足。写好 CSS
是一个不停迭代的经过。从简单起先,听从基本的 CSS
规则和样式指南,然后不断迭代。

color:#fffff;

自己很想驾驭您的 CSS
学习之路。你喜欢的命名规范是什么样?你是什么样社团你的代码文件的?你可以每日通过留言只怕在
Tweet 上告知自个儿。

margin:20px;

自个儿有一个前端学习沟通QQ群:328058344
假诺您在攻读前端的进程中相遇哪些难点,欢迎来我的QQ群提问,群里每一天还会更新一些上学资源。禁止闲谈,非喜勿进。

padding:30px;

border-radius:4px;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

}

在上头的例子中,我们将关心点耦合了。splash
那么些类不但含有了自身的体裁和逻辑,同时也带有了它的子节点的。为了消除那一个难点,大家可以将那段代码分离为八个新的类。

.splash {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

现行我们有 splash 和 splash content 三个类。大家得以将 splash
作为一个形似的全屏类,它可以拥有任何子节点。所有子节点关怀的习性,都在
splash content 中,与父节点的本性是截然解耦的。

你可以通过翻阅下列作品更为了然单一功效原则在样式表和类中的应用。《单一功效原则在
CSS 中的应用》和《单一效率原则》。

粗略胜过复杂

若是您问其余一个中标的前端开发工程师或许 CSS
架构师,他们会告知您,他们根本不曾对友好的代码完全满足。写好 CSS
是一个不止迭代的进度。从简单初步,遵从基本的 CSS
规则和体裁指南,然后不断迭代。

自己很想清楚你的 CSS
学习之路。你欣赏的命名规范是何许?你是何许社团你的代码文件的?你可以每天通过留言可能在
Tweet 上告诉自身。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图