增长你前端水平的

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,在俄联邦的相当于谷歌(谷歌(Google))的追寻引擎,为了化解他们
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,在俄国的一对一于谷歌的搜寻引擎,为领会决他们
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地图