前面一个程序员应该了然的,前端参照他事他说

日期:2019-12-08编辑作者:美高梅老虎机平台

前者参考指南

2015/05/09 · CSS, HTML5, JavaScript · 前端

本文由 伯乐在线 - cucr 翻译,周进林 校稿。未经许可,幸免转发!
Turkey语出处:github.com。应接参与翻译组。

前端程序员应该掌握的 CSS 演变史

2016/07/20 · CSS · 2 评论 · 进化史

本文由 伯乐在线 - 刘唱 翻译,艾凌风 校稿。未经许可,禁绝转发!
Türkiye Cumhuriyeti语出处:Sheena Lyonnais。接待参预翻译组。

CSS生日快乐!你早晚地在您短命的生命里爆发了远大的熏陶,长久地转移了互连网的审美。

层叠样式表(CSS卡塔尔(英语:State of Qatar)就好像一个人神童,从生龙活虎开始就展现出了震天撼地的潜能。当它还在“青春发育期”努力地寻觅包容性的时候,这种样式语言就曾经克制了超越四分之二的阻碍并表达了和谐能够成为Web本事的根底。

让大家回顾一下迄今CSS的今生今世。

CSS晋级:提升你前端水平的 4 个技艺

2016/07/06 · CSS

本文由 伯乐在线 - 小谢 翻译。未经许可,禁绝转发!
Hungary语出处:Jonathan Z. White。迎接参与翻译组。

翻译注:随着 Node.js 、react-native 等本领的穿梭出新,和互连网行业的创办实业的数以万计,了然些前端知识,成为全栈攻城师,快捷的产出原型,体现你的新意,对技术员,尤其是在创办实业的技士来讲,愈来愈首要,上边我们就跟随盛名国外开辟者网址上的热推小说《Leveling up in CSS》,从升高你的CSS本领开始。

图片 1

前面三个开垦者,2017 年你应当学习怎样

2017/02/11 · 前端职场 · 3 评论 · 前端开辟者, 学习

初藳出处: Artem Sapegin   译文出处:Linux中国/GHLandy   

 在现行反革命的快节奏生态中,大家都赞同于花时间尝试最新的申明,然后在互联网上進展剧烈的申辩。

那边,作者并非说大家不可能这么做。但大家真正应该把步子放缓一些,并认真询问那多少个不会有相当大变迁的事务。那样不只有会升级大家的行事品质和大家所开创的市值—— 还将现实地扶植大家更加快驾驭那些新的工具。

正文融入了自己的个人经验以致对新一年的希冀。正如本人想急切表明本人主见意气风发致,我也愿意能在俗尘的商量表单中阅览你的建议。

Sass用法指南

2015/09/06 · CSS · Sass

最早的文章出处: 吴广磊的博客   

写在前头的话:随着CSS文件更大,内容进一层复杂,对其进展很好的保卫安全将变的很辛苦。这个时候CSS预微处理机就能够帮上海高校忙了,它们往往有着变量、嵌套、世襲等许多CSS不辜负有的风味。有好些个CSS预微型机,这里总计Sass的运用办法。

======正文起头======

咱们得以经过生机勃勃种恍若css的编制程序语言编写代码,保存为.scss后缀名的文本,然后选择Sass实行管理为css文件,而这种.scss文件中能够有变量、嵌套等功能,有个别编程的暗意,Sass简介看这里:Sass;同时.scss文件也能够通过Sass处理为裁减的、缩进的等不等风格的css代码,方便早先时期的计划。上边是本身的有些学习总括。

大器晚成、情况布置

1.安装rubby:

  Sass是用ruby写的,要求ruby的周转条件,从以下链接下载rubyinstaller实行安装(windows):

2.安装Sass

设置到位ruby后,接下去安装Sass。由于国内ruby源未来被墙,通过上面格局举办设置SASS,张开cmd命令行。

(1)移除原有的ruby源地址

gem sources –remove 

(2)新扩充可用的ruby源地址

gem sources -a https://ruby.taobao.org

(3) 安装Sass

gem install sass

(4)sublime扶助scss文件高亮展现

借助package control安装sass插件,之后set syntax为sass即可。

图片 2

(5)幸免Sass中文注释乱码

三番四遍写.scss代码进度中粤语注释会有乱码的场地,找到engine.rb文件(日常坐落于Ruby22librubygems2.2.0gemssass-3.4.18libsass目录上面),在享有的require后边新添如下代码:

Encoding.default_external = Encoding.find(‘utf-8’)

图片 3

于今,Sass碰到安顿到位。

二、编译.scss文件为css文件

  统计具体Sass语法格式在此之前,先说一下哪些编译.scss文件为css文件。

1.切换成.scss文件所在目录

一声令下行下切换来代码文件夹目录(如Z:),要是有文件test.scss文件,里面内容如下:(SASS完全协助css语法)

CSS

h1{ font-size:17px; } h2{ font-size:18px; }

1
2
3
4
5
6
h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

 

2.编译scss文件为css文件

运营命令:sass –style compressed test.scss test.css,就能够生成压缩版的css文件,何况命名字为test.css。几点表明:

(1)–style 前面能够有多个参数可选,分别为expanded、nested、compact、compressed,分别选择差别参数的效率能够温和尝尝体验。

(2)test.scss和test.css文件目录能够自定义,例如把Z盘sass目录下的test.scss文件编译为压缩版的文本,并放置在Z盘css目录下,那么命令即:sass –style compressed z:sasstest.scss z:csstest.css

(3)开采进度中,只供给改善scss文件,然后编写翻译;前端页面只须要援用相应的css文件就可以。

3.侦听文件和文件夹

  万生龙活虎期望某多少个scss文件或然相应的公文夹下边文件修正后,自动进行编译,那么能够行使侦屈从令。

(1)侦听文件:

sass –watch –style compressed test.scss:test.css

当test.scss文件有校勘后,会自动编写翻译为test.css,何况是compressed的。

(2)侦听文件夹:

sass –watch –style compressed sass:css

当sass文件夹下.scss文件有改过的时候,会活动编写翻译为与sass汉语件同名的css文件。

备注:

(1)注意源文件和指标文件之间是冒号,与编写翻译命令中为空格不一致。

(2)生成的map文件能够搜寻source map文件的效应。

三、Sass基本用法

下直面Sass基本的用法进行计算,SASS语法与CSS具备相当高的相同度。

以下演示源代码放在test.scss文件中,编写翻译后生成的css文件放在test.css文件中,侦服从令为:

sass –watch –style expanded sass/test.scss:css/test.css

1.变量:以$开头。

源代码:

Sass

$color1:#aeaeae; .div1{ background-color:$color1; }

1
2
3
4
$color1:#aeaeae;
.div1{
    background-color:$color1;
}

编译后:

CSS

.div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  background-color: #aeaeae;
}
 
/*# sourceMappingURL=test.css.map */

2.变量嵌套在字符串之中:应该以#{}包裹。

源代码:

Sass

$left:left; .div1{ border-#{$left}-width:5px; }

1
2
3
4
$left:left;
.div1{
    border-#{$left}-width:5px;
}

编译后:

CSS

.div1 { border-left-width: 5px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  border-left-width: 5px;
}
 
/*# sourceMappingURL=test.css.map */

3.同意实行总括:

源代码:

Sass

$left:20px; .div1{ margin-left:$left+12px; }

1
2
3
4
$left:20px;
.div1{
    margin-left:$left+12px;
}

编译后:

CSS

.div1 { margin-left: 32px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  margin-left: 32px;
}
 
/*# sourceMappingURL=test.css.map */

4.允许选取器嵌套:

源代码:

Sass

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }

1
2
3
4
5
6
7
8
.div1{
    .span1{
        height: 12px;
    }
    .div2{
        width: 16px;
    }
}

编译后:

Sass

.div1 .span1 { height: 12px; } .div1 .div2 { width: 16px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
.div1 .span1 {
  height: 12px;
}
.div1 .div2 {
  width: 16px;
}
 
/*# sourceMappingURL=test.css.map */

5.行使&引用父元素

源代码:

Sass

.div1{ &:hover{ cursor: hand; } }

1
2
3
4
5
.div1{
    &:hover{
        cursor: hand;
    }
}

编译后:

CSS

.div1:hover { cursor: hand; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1:hover {
  cursor: hand;
}
 
/*# sourceMappingURL=test.css.map */

6.注释:

有两种样式:

(1)//comment:该注释只是在.scss源文件中有,编写翻译后的css文件中没有。

(2)/*! */:主要注释,任何style的css文件中都会有,平时放置css文件版权表明等音讯。

(3)/* */:该注释在compressed的style的css中从不,别的style的css文件都会满含。

备考:日常(1)(2)使用的多些

7.允许继续:@extend 类名

源代码:

Sass

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }

1
2
3
4
5
6
7
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
/*# sourceMappingURL=test.css.map */

小心:假使在class2前面有设置了class1的天性,那么也会影响class2,如下:

源代码:

CSS

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }

1
2
3
4
5
6
7
8
9
10
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}
.class1{
    font-weight:bold;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } .class1, .class2 { font-weight: bold; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
.class1, .class2 {
  font-weight: bold;
}
 
/*# sourceMappingURL=test.css.map */

可以见到sass不是单遍编写翻译。

8.引用外界css文件(Partials)

奇迹网页的两样部分会分成三个文件来写样式,只怕引用通用的生龙活虎对样式,那么能够采纳@import。

源代码:

Sass

@import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";

1
2
3
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

编译后:

CSS

h1 { font-size: 17px; } h2 { font-size: 17px; } h3 { font-size: 17px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}
 
/*# sourceMappingURL=test.css.map */

其中_test1.scss、_test2.scss、_test3.scss文件分别安装的h1 h2 h3。日常情况下,复用的公文名如若以下划线_发端的话,Sass会以为该文件是一个partial file,不会将其编写翻译为css文件,主要功能是要经过import援用。

9.mixin和include:

mixin雷同于C语音的宏,存款和储蓄通用模块,通过@include援引。

源代码:

Sass

@mixin common{ display:block; margin:0 auto; } .class1{ font-size:16px; @include common; }

1
2
3
4
5
6
7
8
@mixin common{
    display:block;
    margin:0 auto;
}
.class1{
    font-size:16px;
    @include common;
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin: 0 auto; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
.class1 {
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
 
/*# sourceMappingURL=test.css.map */

还是可以够越来越灵活,像函数同样,如下:

源代码:

Sass

@mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; } .class1{ font-size:16px; @include common(12px,13px,15px); } .class2{ font-size:16px; @include common(12px,13px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin common($value1,$value2,$defaultValue:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
    font-size:16px;
    @include common(12px,13px);
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 15px; } .class2 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 12px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.class1 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 15px;
}
 
.class2 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 12px;
}
 
/*# sourceMappingURL=test.css.map */

末尾,bootstrap第四版发布了下载,并且从less转移到了sass,可以下载里面看看它里面包车型地铁scss代码,体会一下,恐怕你会发觉更加的多有意思的用法。

(完)

 

1 赞 2 收藏 评论

图片 4

HTML

1996年12月—CSS 1

互联英特网对CSS正式的介绍要追溯到1999年,环球网缔盟 (W3C卡塔尔面向国内外发表CSS的时候。CSS并不是那时独一意气风发种正在开荒中的样式语言,但是层叠那几个必必要素和付出体系将它与别的的语言分化开来。

“HTML 是风流倜傥种具有语义并用来传达网页内容的言语,CSS 最早的筹算目标,就是为着使 HTML 的那生龙活虎观念能够维持下去。”一个人谷歌的正式黑客(spec 骇客)Tab Atkins Jr.在网络播客平台说,“特别是让机器能够知情。”

样式表并不是全新的,自从正式通用标志语言(S放线菌壮观素L卡塔尔(قطر‎的开垦以来,它(样式表卡塔尔(قطر‎就因为部分技术而被接收。但在当下,将它利用于网页依然很奇怪的。

CSS最早并不曾什么样闪光点,不过它的影响力是黑马的。为了科学地来对待它,下图是首先个发表在网络上的网页看起来的轨范:

图片 5

下边是叁个好像的应用了CSS的幼功网页的事例:

图片 6

正如你所见到的那样,CSS的加入使得网页成分能够接纳特别规的风味。其关键的补益是设计员和开拓人士将来得以毫无经过退换HTML就能够改换CSS的有的属性了。比如,石磨蓝的高亮区域能够换到黑色或天青。

然则在及时它大致上相当于那样了。W3C揭橥的CSS推荐规范有着以下开始属性:

  • 前程和背景颜色/图片
  • 字体属性举个例子字体和加粗
  • 文本,包涵单词和字母间隔
  • 外边距,边框,内边距
  • 分类和对齐

CSS 在刚领头读书的时候看起来相当轻便。终究,它唯有正是些体制而已,事实上是这般啊?

但是,随着你的穿梭询问。超级快,你会发觉 CSS 没你想象的那么简单,它复杂且有深度。

搞好那四件职业,能令你在大范围利用 CSS 的时候保障代码的强壮性:使用合适的语义,模块化,接纳统风华正茂的命名规范,据守单大器晚成成效原则。

上学如何写出可读性高的代码

我们大多数的做事而不是编写新代码,而是维护本来就有代码。那意味你最后阅读代码的岁月要比编写它所花销的小时要长,所以你供给为事后供给阅读你代码的工程师优化代码,实际不是为着解释器。

这里作者建议您按以下顺序 — 安分守己 — 阅读上边三本书:

  • Dustin Boswell 的 《编排可读代码的法子(The Art of Readable Code)》
  • Robert C. Martin 的 《代码整洁之道(Clean Code: A Handbook of Agile Software Craftsmanship)》
  • Steve McConnell 的 《代码大全(Code Complete: A Practical Handbook of Software Construction)》

语义

HTML5为大家提供了汪洋的语义成分,意在精准地陈述内容。确定保障您收益于其拉长的词汇。

XHTML

<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>
 
<!-- good -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

确定保证您精晓你正在利用的语义成分。以错误的办法选择语义成分比不采纳更不佳。

XHTML

<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1>

1
2
3
4
5
6
7
8
9
10
11
<!-- bad -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>
 
<!-- good -->
<h1>
  <img alt=Company src=logo.png>
</h1>

1998年5月—CSS 2

参照他事他说加以考查CSS1中确立的习性,CSS 2的率先份工作草案在1999年四月公布,並且在壹玖玖捌年四月改成了W3C的引荐标准。

其一本子举办了品质的技术,使其进一层两种化。例如:有 :hover伪类和臭名昭彰的公文阴影效果(以往已不适那时候候宜):

图片 7

选拔万分的语义

在 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 意味着在增选品种的时候,类名要传达出构造和功用消息。类名要非常轻松被通晓。确认保障它们并不是太现实、太独特。那样,你就足以复用它了。

图片 8

为了阐述怎么样是叁个杰出的类名,请看那一个简化了的 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 命名和前端构造》。

深深学习 JavaScript

现前段时间,每一周都会现身三个新的 JavaScript 框架,并标榜自个儿比任何的其他旧框架都要好用。那样的场馆下,大家许五个人更赞成于花销时间来学习框架,并且这么也要比上学 JavaScript 自身要便于的多。要是说你正在使用框架,但并不明白该框架的做事形式,随时结束使用它,并去学习 JavaScript,直到你可以看到知情这么些工具的做事方法收场

  • 可以从 Kyle Simpson 的 前面一个程序员应该了然的,前端参照他事他说加以考察指南。你所不知底的 JavaScript 种类发轫,那几个连串能够在线无偿读书。
  • Eric Elliott 列出的三个漫漫 2017 年:JavaScript 的学习目的。
  • Henrique Alves 列出的 张开响应式开垦早前必得询问的事体(实际上正是贰个文化框架)。
  • Mike Pennisi 的 JavaScript 开拓者:注意你的语言 — 掌握ECMAScript 新特性的中 TC-39 发展历程。

简洁

维持代码简洁。忘记旧的XHTML习于旧贯。

XHTML

<!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- bad -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
 
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>

2011年6月—CSS 2.1

唯独,W3C不再维护CSS 2的引入规范了。作为代表,CSS2.1在二〇〇二年临蓐并于二〇一三年三月成为了W3C推荐规范。那些建构在CSS 2之上的修正版消除了CSS 2的比相当多bug并代表了事前的本子。

CSS 2.1升官了复杂度。它准予了父亲和儿子关系的概念,让设计员和开拓人士能够在叁个给定成分上定义多少个类名。它还出产了或许变为响应式设计的第二遍尝试:字体大小调度(font-size-adjust卡塔尔属性。

身体力行文稿今后得以本着一定的媒体设备,包含手持设备,盲文设备,可视化浏览器,打字与印刷机和听觉设备。那是演化成为CSS 3的开首。

模块化

在此个充满了组件库(以 React 为例)的生机勃勃世,模块化便是王者。组件正是由曾经解构了的接口创设的可组成的模块。上边是二个Product Hunt(风姿洒脱种公布好的创业布置的网址)前端页面。作为练兵,让大家将以此页面分解成一文山会海的机件。

图片 9

每一种颜色框代表一个零件,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>

绝大非常多零器件都足以解释为更加小的机件。

图片 10

每三个 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 组件发生别的影响。

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

图片 11

零器件驱动设计

模块化你的 CSS 时,首先将你的规划分解成八个零器件。你能够使用纸和笔,也能够运用相同Illustrator 可能 Sketch 那类的软件。明确你将要怎么着命名那一个零件,同不时间清理各类零器件之间的涉嫌。

翻阅越来越多关于 CSS 组件驱动的稿子,详见《CSS 创设:可扩张和模块化管理》、《使用 Sass 编写模块化的 CSS》和《模块化你的前端代码——编写高可保证和条理清晰的代码》。

学学函数式编制程序

从小到大以来,我们直接希看着 JavaScript 引进类,但确确实实引进类之后,大家却不想在 JavaScript 中动用类了,大家只想行使函数。大家照旧运用函数编写 HTML (JSX卡塔尔(英语:State of Qatar)。

  • Kyle Simpson 的 轻量级函数式 JavaScript。
  • Frisby 教授的 函数式编制程序完全指南 和 在线无需付费课程。

可访谈性

可访问性不该是多个后头的主张。你不要成为一人WCAG行家来进步你的网站,你可以至时起初修复这个小标题,它将发生宏大的改过,如:

  • 学会正确选择alt属性
  • 保障您的链接和开关等都很好地方统一标准记(未有<div class =button>这种暴行卡塔尔国
  • 无须完全依赖颜色来传达音信
  • 显式地给表单控件加标签

XHTML

<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1>

1
2
3
4
5
<!-- bad -->
<h1><img alt="Logo" src="logo.png"></h1>
 
<!-- good -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

CSS 3

笔者们前几天最熟谙的本子,CSS 3开垦自一九九八年。其最大的差别之处是引入了模块,各类模块都有着自个儿的法力和扩大功效。个中有风流罗曼蒂克对取代了以前CSS2.1的一些。

自二零一二年三月,W3C正式推举了多少个模块以至大批量用以支付的区别阶段的习性。本质上,本次(CSS 3卡塔尔国 将一切CSS语言分解形成模块并使其大同小异独立。

规范推举的模块包涵:

  1. 2011年6月 —颜色
  2. 二〇一二年5月  第三代采取器
  3. 贰零壹壹年五月   命名空间
  4. 二零一三年3月    媒体询问

传播媒介询问差相当的少是最具革命性的模块之生机勃勃。它担负响应式设计,况兼风流倜傥度化为今后互连网界的专门的学业。以下是二个基于媒体询问的骨干响应式设计的事例:

图片 12

CSS的现在:它将去何处跟哪些人?

许几个人想清楚CSS接下去会怎么。一些人竟然质疑大家是否还亟需CSS。

正如过多少人所瞩目到的,W3C已经抛弃了CSS的等第,使用那几个条目款项只是为了与往年的版本有别开来。那在W3C社区早已为人纯熟了大器晚成段时间了。

“平昔就从没有过过CSS 4,今后也永恒都不会有CSS 4,CSS 4是三个子虚乌有的事物,” Tab Atkins Jr. 于2011年在他的博客中写道。他在谷歌工作,坐在CSS专门的学问组,也进献于W3C的别样多少个工作组。

近日,这种语言被回顾地喻为CSS。这一个社区也把精力聚集在支付更目眩神摇更有益于的独门模块上,使这种语言更加的成熟,可以适应以后设计员和莫衷一是器材的挑衅和供给。在某种意义上,就好像CSS希图从大学里结业了相像,一个簇新的世界正等待着它。

打赏帮助笔者翻译越来越多好文章,感谢!

打赏译者

使用统风流浪漫的命名标准

前段时间有几10个分化版本的 CSS 命名标准。某一个人对他们选用的命名标准特别笃定,认为他们的比外人的越来越好。事实上,分化的人喜爱分裂的命名标准。小编听见的最棒的建议是:选用你以为最合适的命名标准。

上边轻松列举一下常用的命名标准:

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

本身最心爱的命名标准是 BEM。BEM 代表块(block卡塔尔(英语:State of Qatar)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯的风流洒脱对一于Google的搜寻引擎,为了肃清他们 CSS 代码库中的缩放难题而提议了它(它指BEM)。

图片 13

BEM 是八个十二万分简约——又非常严酷——的命名规范。

CSS

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

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

块(Blocks)代表高端别的类。成分(Elements)是块的子模块。修饰符(modifiers)代表区别的图景。

图片 14

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:那一个是怎样?笔者该用哪些?》。

读书布置底子知识

用作二个前端开垦者,我们比那几个生态中的任哪个人 —— 以至可能是设计人员 —— 都要特别切近客户。借使设计者必须去明确你还原在显示器上的每二个像素,你恐怕做错了一些事。

  • David Kadavy 的《红客与统筹:剖判设计之美的潜在(Design for Hackers)》或相应的 无需付费课程。
  • Tracy Osborn 的讲座:为非设计职员的安插学问。
  • Nathan Barry 的 《Web 应用设计(Design of Web Applications)》。
  • Jason Santa Maria 的 《Web 页面设计(On Web Typography)》。
  • Alan Cooper 的 《相互设计之路:让高科学技术付加物回归人性(The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity )》。
  • 两篇关于 UI 动漫的稿子:怎么接纳动漫片来增长UX、对接分界面。

语言

尽管定义语言和字符编码是可选的,但推荐在文书档案品级证明它们,尽管它们已经在HTTP诉求尾部已经钦点。字符编码优用utf – 8。

XHTML

<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>

1
2
3
4
5
6
7
8
9
10
<!-- bad -->
<!doctype html>
<title>Hello, world.</title>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>

打赏扶助本身翻译更加的多好作品,感谢!

图片 15

1 赞 2 收藏 2 评论

遵纪守法单风姿罗曼蒂克功效原则

单纯性效率原则分明每种模块和类都应该有三个纯净的意义,并且该意义应该由那些类完全封装起来。

在 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 中的应用》和《单生机勃勃功用原则》。

读书怎么着与人合营

某人很心爱通过编制程序来与计算机实行互相,而非与人开展交互作用。不幸的是,那样的结果并不是很好。

基本上大家不恐怕完全脱离群众体育来干活:大家连年须求和任何开垦者、设计员以至项目经理—— 不常候居然要和顾客 —— 调换意见。这是相比较难的天职,但倘若您想要真正通晓你在做怎么着以致为啥要那样做的话,这一步是超级重大的,因为那正是大家办事的市场总值所在。

  • John Sonmez 的《软技能:代码之外的生存指南(Soft Skills: The software developer’s life manual)》。
  • Robert C. Martin 的《代码整洁之道:程序猿的专门的学问素养(The Clean Coder: A Code of Conduct for Professional Programmers)》。
  • Jim Camp 的 《从零伊始:职业职员不想令你询问的构和工具(Start with No: The Negotiating Tools that the Pros Don’t Want You to Know)》。

性能

除非有二个客观的理由在内容前边加载脚本,不然请不要把它身处前面阻止页面包车型客车渲染。固然你的样式表极大,分离出开首化时必需的样式,并在三个独立样式表中延迟加载此外一些。一回HTTP诉求显然低于二次,但感知速度是最注重的成分。

XHTML

<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- bad -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
 
<!-- good -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

至于作者:刘唱

图片 16

数据发掘博士 个人主页 · 笔者的稿子 · 37 ·   

图片 17

简轻易单赶过复杂

设若您问别的壹此中标的前端开发程序员或然 CSS 构造师,他们会告知你,他们根本不曾对友好的代码完全满意。写好 CSS 是贰个不息迭代的进程。从不难开头,据守基本的 CSS 准则和体裁指南,然后不断迭代。

自家很想掌握你的 CSS 学习之路。你赏识的命名标准是哪些?你是哪些协会你的代码文件的?你能够任何时候通过留言大概在Tweet上告诉作者。

其他:借使你爱怜那篇小说,不要紧点击下推荐按键,或然把它分享给你的爱人,那样会更棒。

风流倜傥经你想要明白更加多,你可以关切本身的 Twitter ,作者会平时的在地点分享部分关于陈设、前端开拓、机器人和机械学习的剧情。

打赏扶持本身翻译越来越多好文章,多谢!

打赏译者

读书怎么为顾客编写代码

与同事或其余人的调换大多数是以文件的款式张开的:目的描述和评价、代码注释、Git 提交、即时闲谈音讯、电子邮件、推文、博客等。

想象一下,大家要花费多少日子来阅读和通晓有所以上提到的那整个。假如您可以通过写得更明了、简洁来压缩这一个时刻,世界将成为一个更加好的行事场所。

  • William Zinsserd 的《作文法宝 : 非杜撰创作指南(On Writing Well: The Classic Guide to Writing Nonfiction)》。
  • William Strunk 和 E. B. White 的《匈牙利(Magyarország卡塔尔国语作文指南(The Elements of Style)》。
  • 奥威尔写作法则。
  • 俄文:很好的 Glavred 课程。

CSS

打赏扶助自个儿翻译更加多好小说,谢谢!

任选后生可畏种支付办法

图片 18 图片 19

1 赞 12 收藏 评论

上学从前的计算机科学智慧

前端开拓已经不仅轻易的下拉菜单了,它前古没有的更头昏眼花了。随着大家所需解决难点的复杂度越来越高,名誉扫地的“JavaScript 疲乏症”也随之出现了。

那代表今后亟待上学非前端开采职员过去五十几年所储存产生的知识精粹。而这也是自家最想听到你向自家推荐的剧情了。

以下是自己个人给大家的引入:

  • Coursera 的 《学习像Computer科学家那样考虑方式(Learn To Think Like A Computer Scientist )》。
  • DHH 的 对作者意义非同常常的五本书。

读完本文,你有些什么建议吗?在此新的 2017 年里你又想上学些什么呢?接待留言商议。

2 赞 21 收藏 3 评论

图片 20

分号

能力上来说,分号在CSS里担当七个分隔符,但请把它当做二个说尽符。

CSS

/* bad */ div { color: red } /* good */ div { color: red; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: red
}
 
/* good */
div {
  color: red;
}

关于小编:小谢

图片 21

懒懒的技师~ 个人主页 · 作者的文章 · 24 ·  

图片 22

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:前面一个程序员应该了然的,前端参照他事他说

关键词:

Chrome开辟者工具不完全指南,要是您正在念大学

Chrome开辟者工具不完全指南,要是您正在念大学。Chrome开垦者工具不完全指南(六、插件篇) 2015/07/13 · CSS,HTML5,Jav...

详细>>

落到实处后端组件化,捉弄前端组件化的踩坑之

致刚入行的前端程序猿 2017/04/13 · 前端职场 · 8评论 ·前端技术员 落到实处后端组件化,捉弄前端组件化的踩坑之路...

详细>>

前面一个那条路,大家该去何处跟哪些人

接头CSS属性值语法 2016/08/12 · CSS ·属性值 本文由 伯乐在线 -殊翻译,艾凌风校稿。未经许可,幸免转载! 立陶宛语出...

详细>>

把文件放在图片之上的两种办法,关于前端的构

梳理前端开拓使用eslint和prettier来检查和格式化代码难点 2018/06/11 · JavaScript· 格式化 原稿出处:Edwin    关于前端的...

详细>>