比如说表单按钮,   译文出处

作者: 前端  发布:2019-11-09

开始编写CSS

2013/09/10 · CSS · 1 评论 · CSS

原文出处: Krasimir Tsonev   译文出处:w3cplus(@w3cplus)   

你不要觉得CSS没什么重要可言?最近几年他成为一个热门的话题,很多人都在讨论他。CSS并不是一个简单的事情,前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些,我们更关心的是网站的性能以及如何制作出更好的网站。在本文中,我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个程序员,我真正感兴趣的事情是框架(Architectural)部分。我觉得写CSS应该需要去改变,为此我深挖了很多知识。我搜索了好的程序、工作流和原则。这篇文章将带领大家和CSS一起旅行,很多人都说写CSS并不是编程,我就不同意,我说写CSS同样是有趣的,富有挑战性的。

  • 为什么要分层?
  • SMACSS
  • BEM
  • SUIT
  • ACSS

现代 CSS 进化史

2018/02/12 · CSS · CSS

原文出处: Peter Jang   译文出处:缪斯   

9159.com 1

CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。

为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个最佳实践是最好的目前尚无定论,而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS,这对于你来说是相当迷惑的。

这篇文章的目的是通过回顾CSS的历史背景,介绍下时至2018年的今天CSS发展过程中的一些设计模式和工具的演变。通过对这些背景的理解,你将会更轻松的理解每个设计思想并且学以致用。接下来让我们开始吧!

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://css-tricks.com/bem-101/
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
https://www.cnblogs.com/zhuzhenwei918/p/6104065.html

CSS预处理器

9159.com 2

让我们一起面对吧,在世界上写CSS并不是一件可笑的事情。CSS预处理器看起来就像CSS,但他更像一个魔术师一样,使用一些魔法会产生有效的CSS代码。这让你的样多和浏览器之间新增加了一层,这样不是更加的糟糕吗?看上去是这样,但事实不是这样的,因为CSS预处理器提供了一些真正有用的特性。

原因
  • CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理
  • 大量的样式,覆盖、权重和很多!important,分好层可以让团队命名统一规范,方便维护
  • 有责任感的去命名你的选择器

CSS基本样式使用

我们从一个最简单的网页index.html 开始,这个文件中包含一个独立的样式文件index.css:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> <footer>This is the footer.</footer> </body> </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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <header>This is the header.</header>
  <main>
    <h1>This is the main content.</h1>
    <p>...</p>
  </main>
  <nav>
    <h4>This is the navigation section.</h4>
    <p>...</p>
  </nav>
  <aside>
    <h4>This is an aside section.</h4>
    <p>...</p>
  </aside>
  <footer>This is the footer.</footer>
</body>
</html>

上面的HTML标签中没用使用任何class或者id。
在没有任何CSS样式的情况下,我们的网站看起来是这个样子:

9159.com 3
点击查看在线demo

功能可用,但看起来不好看,我们可以继续在index.css加点CSS美化下排版:

/* BASIC TYPOGRAPHY */ /* from */ html { font-size: 62.5%; font-family: serif; } body { font-size: 1.8rem; line-height: 1.618; max-width: 38em; margin: auto; color: #4a4a4a; background-color: #f9f9f9; padding: 13px; } @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: Verdana, Geneva, sans-serif; font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } h1 { font-size: 2.35em; } h2 { font-size: 2em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; }

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* BASIC TYPOGRAPHY                       */
/* from https://github.com/oxalorg/sakura */
html {
  font-size: 62.5%;
  font-family: serif;
}
body {
  font-size: 1.8rem;
  line-height: 1.618;
  max-width: 38em;
  margin: auto;
  color: #4a4a4a;
  background-color: #f9f9f9;
  padding: 13px;
}
@media (max-width: 684px) {
  body {
    font-size: 1.53rem;
  }
}
@media (max-width: 382px) {
  body {
    font-size: 1.35rem;
  }
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 {
  font-size: 2.35em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.75em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1.25em;
}
h6 {
  font-size: 1em;
}

这地方大部分都是关于排版(字体、行高等)样式的定义,也包含一些颜色和一个layout居中设置。为了让每个属性有个合理的值你需要学习点设计理论,但是这个地方我们用到的CSS本身并不复杂,你可以直接定义,结果如下所示:

9159.com 4
Click here to see a live example

有所变化了吧!正如CSS许诺的一样——用一种简单的方式给文档添加上样式,不需要编程或者复杂的业务逻辑。不幸的是,实际情况会复杂的很多,我们不单单使用的是CSS的排版和颜色这种简单的样式定义。

格式

类名建议使用破折号代替驼峰法。如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。
不要使用 ID 选择器。
在一个规则声明中应用了多个选择器时,每个选择器独占一行。
在规则声明的左大括号 { 前加上一个空格。
在属性的冒号 : 后面加上一个空格,前面不加空格。
规则声明的右大括号 } 独占一行。
规则声明之间用空行分隔开。
.avatar { border-radius: 50%; border: 2px solid white; } .one, .selector, .per-line { // ... }

连接(Concatenation)

我认为最有价值的东西是连接你的文件。我相信,你知道使用@import来引用你的.css文件,告诉浏览器获取这个文件。这样做,浏览器需要增加一个请求,这样有点麻烦,因为你可能有很多个这样的文件。增加额外的请求,使你的程序性能变得更低。如果您使用CSS预处理器语言,这个问题将不会存在。他们只会编译你样式文件中单个.css文件。

SMACSS

SMACSS(Scalable and Modular Architecture for CSS 可扩展的模块化架构的CSS)像OOCSS一样以减少重复样式为基础。然而SMACSS使用一套五个层次来划分CSS给项目带来更结构化的方法:

  • Base 设定标签元素的预设值 PS:html{} input[type=text]{}
  • Layout 整个网站的 ‘大架构’ 的外观 PS:#header{margin: 30px 0;}
  • Module 应用在不同页面公共模块 PS:.button{}
  • State 定义元素不同的状态 PS:.nav-main{}
  • Theme 画面上所有 ‘主视觉’ 的定义 PS:border-color、background-image

CSS的布局使用

在20世纪90年代,CSS还未广泛普及之前,对于页面的布局没有太多的选择。HTML最初是被设计为创建纯文本的一门语言,并不是包含侧边栏、列等布局的动态页面。早期的时候,页面布局通常使用的是HTML表格,在行和列中组织内容,这种方式虽然有效,但是把内容和表现杂糅在一块了,如果你想改变网页的布局就得需要修改大量的HTML代码。

CSS的出现推动了内容(写在HTML中)和表现(写在CSS中)的分离,人们开始把所有的布局代码从HTML中移除放入到CSS中,需要注意的是,和HTML一样CSS的设计也不是用来做网页内容布局的,所以早期的时候试图解决这种分离设计是很困难的。

我们来用个实际例子来看下如何实现布局,在我们定义CSS布局前先重置下padding和margin(会影响布局的计算),不同的区域我们定义不同的颜色(不要太在意好看不好看只要不同区域间足够醒目就可以)

/* RESET LAYOUT AND ADD COLORS */ body { margin: 0; padding: 0; max-width: inherit; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* RESET LAYOUT AND ADD COLORS */
body {
  margin: 0;
  padding: 0;
  max-width: inherit;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

现在页面应该看起来如下:

9159.com 5
Click here to see a live example

接下来我们用CSS来布局下页面内容,我们将按照时间顺序采用三种不同的方式,先从最经典的浮动布局开始吧。

注释

建议使用行注释 (在 Sass 中是 //) 代替块注释。
建议注释独占一行。避免行末注释。
给没有自注释的代码写上详细说明,比如:
为什么用到了 z-index
兼容性处理或者针对特定浏览器的 hack

扩展(Extending)

LESS和Sass是最主要的两个CSS预处理器。我们都支持扩展。虽然他们的工作方式略有不同,但他们的想法是一样的。你可以做一个基本的类(通常称为mixin)和一群属性,然后在另一个选择器导入这些属性,如:

JavaScript

// less .bordered(@color: #000) { border: dotted 2px @color; } .header { .bordered; } .footer { .bordered(#BADA55); } // 编译出来的CSS .header { border: dotted 2px #000000; } .footer { border: dotted 2px #bada55; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// less
.bordered(@color: #000) {
    border: dotted 2px @color;
}
.header { .bordered; }
.footer { .bordered(#BADA55); }
 
// 编译出来的CSS
.header {
    border: dotted 2px #000000;
}
.footer {
    border: dotted 2px #bada55;
}

这里的问题是,如果你没有定义一个参数的mixin,例如刚才的示例:

JavaScript

.bordered { border: dotted 2px #000; }

1
2
3
.bordered {
    border: dotted 2px #000;
}

这是最后编译的CSS文件,无论你是否使用都没有任何关系。因为他是一个有效的选择器。在Sass中我们可以做得更灵活一些。他有混合(mixins)、扩展(extends)和占位选择器(placeholders)(如果您想看到他们之间的区别,我强烈建议您阅读这篇文章)。接下来我们简单看看Sass是如何工作和编译的:

JavaScript

// sass @mixin bordered($color: #000) { border: dotted 2px $color; } .header { @include bordered; } .footer { @include bordered(#BADA55); } //编译的CSS .header { border: dotted 2px black; } .footer { border: dotted 2px #bada55; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// sass
@mixin bordered($color: #000) {
    border: dotted 2px $color;
}
.header { @include bordered; }
.footer { @include bordered(#BADA55); }
 
//编译的CSS
.header {
    border: dotted 2px black;
}
.footer {
    border: dotted 2px #bada55;
}

它看起来和前面几乎相同,但如果我们秋看第二个placeholder的用例:

JavaScript

// sass %bordered { border: dotted 2px #000; } .header { @extend %bordered; } .footer { @extend %bordered; } // 编译的CSS .header, .footer { border: dotted 2px #000; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// sass
%bordered {
 
    border: dotted 2px #000;
}
.header {
    @extend %bordered;
}
.footer {
    @extend %bordered;
}
 
// 编译的CSS
.header, .footer {
    border: dotted 2px #000;
}

这个有两个优势,首先不会编译出.bordered类名,其次会使用组合选择器,合并相同的样式,使代码变得更加简洁。

BEM(不是说都要加下划线,主要针对的是整体)

BEM和SMACSS非常类似,主要用来如何给项目命名。一个简单命名更容易让别人一起工作。比如选项卡是一个块(Block),这个块里的元素是标签之一(Element),而当前选项卡是一个修饰状态(Modifier):

  • block 代表了更高级别的抽象或组件
  • block__element 代表.block的后台,用于形成一个完整的.block整体。
  • .block--modifier 代表.block的不同状态或不同版本。
  • 修饰符使用的是,子模块使用_符号。

    9159.com 6

    BEM

基于浮动的布局

CSS浮动属性最初是为了将图片浮动在一列文本的左侧或者右侧(报纸上经常看到)。早在21世纪初,web开发者将这个属性的优势扩展到了任意的元素,这意味着你可以通过div的内容浮动创建出行和列的错觉。同样,浮动也不是基于这样的目的设计的,所以兼容性上会有很多问题。

2006年,A List Apart上发表了一篇热门文章In Search of the Holy Grail,文章概述了实现圣杯布局的详细方法——一个头部、三列内容和一个底部,你一定觉得一个简单的布局被称为圣杯布局很疯狂吧,但是在当时纯CSS的时代这的确很难实现。

下面是一个基于浮动布局的例子,用到了我们文章中提到的一些技术点:

/* FLOAT-BASED LAYOUT */ body { padding-left: 200px; padding-right: 190px; min-width: 240px; } header, footer { margin-left: -200px; margin-right: -190px; } main, nav, aside { position: relative; float: left; } main { padding: 0 20px; width: 100%; } nav { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; } aside { width: 130px; padding: 0 10px; margin-right: -100%; } footer { clear: both; } * html nav { left: 150px; }

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
33
34
35
/* FLOAT-BASED LAYOUT */
body {
  padding-left: 200px;
  padding-right: 190px;
  min-width: 240px;
}
header, footer {
  margin-left: -200px;
  margin-right: -190px;  
}
main, nav, aside {
  position: relative;
  float: left;
}
main {
  padding: 0 20px;
  width: 100%;
}
nav {
  width: 180px;
  padding: 0 10px;
  right: 240px;
  margin-left: -100%;
}
aside {
  width: 130px;
  padding: 0 10px;
  margin-right: -100%;
}
footer {
  clear: both;
}
* html nav {
  left: 150px;
}

仔细看下CSS代码,这里面为了让它工作包含一些必须的hack方式(负边距、clear: both、硬编码的宽度计算等),稍后我们会对这些细节做详细的解释。最终的结果如下:

9159.com 7
Click here to see a live example

看起来不错了,但是通过三列的颜色可以看出来他们的高度不一样,页面的高度也没有填充满屏幕。这些问题是浮动布局导致的,所有的浮动只是将内容放在某一区块的左边或者右边,但是没法知道其他区块的高度。这个问题一直没有个好的解决方案,直到Flexbox布局的出现。

OOCSS 和 BEM

出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:
• 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
• 可以帮助我们创建出可重用、易装配的组件。
• 可以减少嵌套,降低特定性。
• 可以帮助我们创建出可扩展的样式表。

OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。

配置(Configuration)

LESS和Sass都支持变量,你可以调用这些变量,将将他们作为属性的值:

JavaScript

// sass $brand-color: #009f0A; ... h1 { color: $brand-color; }

1
2
3
4
5
6
// sass
$brand-color: #009f0A;
...
h1 {
    color: $brand-color;
}

这是一个很好的特性,因为你可以储存一些重要的东西,比如说颜色或者网格的宽度,将他们存放在同一个地方,如果你需要修改一些不经常改动的代码,会变得非常的简便。

另一个好处理,可以使用变量的插值,如下面演示的方法:

JavaScript

// sass @mixin border($side) { border-#{$side}: solid 1px #000; } .header { @include border("left"); } // 编译的CSS .header { border-left: solid 1px #000; }

1
2
3
4
5
6
7
8
9
10
11
12
// sass
@mixin border($side) {
    border-#{$side}: solid 1px #000;
}
.header {
    @include border(&quot;left&quot;);
}
 
// 编译的CSS
.header {
    border-left: solid 1px #000;
}

SUIT

SUIT起源于BEM,但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来:

  • 修饰符使用的是,子模块使用_符号。

    9159.com 8

    SUIT

如果你不想使用如此严格或者复杂的命名规则,给每一个选择器前加前缀同样可以达到这样的效果。
.s-product-detauils{}
.t-product-detauils{}
.js-product-detauils{}

结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。

基于Flexbox的布局

flexbox CSS属性实在2009年第一次提出来的,但直到2015年才得到浏览器的广泛支持。Flexbox被设计为定义一个空间在行或者列上如何分布的,这让它比浮动更适合用来做布局,这意味在使用浮动布局十多年后,web开发者终于不再使用带有hack的浮动布局方式了。

下面是一个基于Flexbox布局的例子。注意为了让flexbox生效我们需要在三列的外面额外包装一个div:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <div class="container"> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> </div> <footer>This is the footer.</footer> </body> </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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <header>This is the header.</header>
  <div class="container">
    <main>
      <h1>This is the main content.</h1>
      <p>...</p>
    </main>
    <nav>
      <h4>This is the navigation section.</h4>
      <p>...</p>
    </nav>
    <aside>
      <h4>This is an aside section.</h4>
      <p>...</p>
    </aside>
  </div>
  <footer>This is the footer.</footer>
</body>
</html>

下面是flexbox布局的CSS代码:

/* FLEXBOX-BASED LAYOUT */ body { min-height: 100vh; display: flex; flex-direction: column; } .container { display: flex; flex: 1; } main { flex: 1; padding: 0 20px; } nav { flex: 0 0 180px; padding: 0 10px; order: -1; } aside { flex: 0 0 130px; padding: 0 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* FLEXBOX-BASED LAYOUT */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
  order: -1;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

这种方式和浮动布局相比更加紧凑了,虽然flexbox一些属性和值初看起来有些困惑,但是好歹不需要像浮动布局那样负边距的hack方案了,这是个巨大的进步。最终结果如下:

9159.com 9
Click here for a live example

效果好多了!所有的列高度都相同,并且占据了整个页面的高度。从某种意义上来说这似乎是完美的了,但是这个方式也有些小问题,其中一个就是浏览器的兼容性——主流的现代浏览器都支持flexbox,但是一些旧的浏览器不兼容。幸运的是浏览器厂商也正在尽最大努力终止对旧版本浏览器的支持,为web开发者提供更一致的开发体验。另一个问题是我们需要``

包裹HTML内容标签,如果能避免会更完美。理想状态下,任何CSS布局都不需要改变HTML标签的。最大的缺点是CSS代码本身——flexbox虽然去掉了浮动的Hack,但是代码的可读性上变得更差了。你很难去理解flexbox的CSS,并且不知道页面上是如何去布局所有元素的。在写flexbox布局代码的时,有很多时候靠的是大量的猜测和尝试。

特别需要注意的是,flexbox被设计用来在单行或者单列中分割元素的——它不是设计用来给整个页面做布局的!尽管它能很好的实现(相对于浮动布局好很多)。另一种不同的规范是用来处理多行或者多列布局的,我们称之为CSS 网格。

尽量不要使用ID 选择器!!!

在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。
JavaScript 钩子
避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况:轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改。
我们推荐在创建用于特定 JavaScript 的类名时,添加 .js- 前缀:
<button class="btn btn-primary js-request-to-book">Request to Book</button>

针对预处理器(Against the preprocessors)

  • 预处理器是一种工具,您要使用得先要有一个适合的环境。如果你思念将其集成到你的应用程序中,也需要额外的编码。
  • 如果你不想让你的代码变得混乱,你需要有一个观察机制,用来监测你的文件。如果这样,你每个项目开始时就需要运行这个监测机制。
  • 通常开发人员只看到.less或.sass文件,但是输出是什么非常重要。你可能有写得很好的Sass代码,但这并不意味着,你最终会有很好的CSS代码。可能会有一些特异性的问题,所以需要定期检测编译的版本。

ACSS

考虑如何设计一个系统的接口。原子(Atoms)是创建一个区块的最基本的特质,比如说表单按钮。分子(Molecules)是很多个原子(Atoms)的组合,比如说一个表单中包含了一个标签,输入框和按钮。生物(Organisms)是众多分子(Molecules)的组合物,比如一个网站的顶部区域,他包含了网站的标题、导航等。而模板(Templates)又是众多生物(Organisms)的结合体。比如一个网站页面的布局。而最后的页面就是特殊的模板。

9159.com 10

ACSS

基于Grid的布局

CSS网格最早在2011年提出的(比flexbox提案晚不了多久),但是花了好长时间才在浏览器上普及起来。截止2018年初,大多数现代浏览器都已经支持CSS grid(这比一两年前有巨大的进步了)
下面我们看一下基于网格布局的例子,注意在这个例子中我们摆脱了flexbox布局中必须使用``

的限制,我们可以简单的使用原始的HTML,先看下CSS文件:

/* GRID-BASED LAYOUT */ body { display: grid; min-height: 100vh; grid-template-columns: 200px 1fr 150px; grid-template-rows: min-content 1fr min-content; } header { grid-row: 1; grid-column: 1 / 4; } nav { grid-row: 2; grid-column: 1 / 2; padding: 0 10px; } main { grid-row: 2; grid-column: 2 / 3; padding: 0 20px; } aside { grid-row: 2; grid-column: 3 / 4; padding: 0 10px; } footer { grid-row: 3; grid-column: 1 / 4; }

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
/* GRID-BASED LAYOUT */
body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: min-content 1fr min-content;
}
header {
  grid-row: 1;
  grid-column: 1 / 4;
}
nav {
  grid-row: 2;
  grid-column: 1 / 2;
  padding: 0 10px;
}
main {
  grid-row: 2;
  grid-column: 2 / 3;
  padding: 0 20px;
}
aside {
  grid-row: 2;
  grid-column: 3 / 4;
  padding: 0 10px;
}
footer {
  grid-row: 3;
  grid-column: 1 / 4;
}

虽然结果看起来和基于flexbox的布局一样,但是CSS在很大程度上得到了改进,它清晰地表达出了期望的布局方式。行和列的大小和形状在body选择器中定义,每一项item直接通过他们所在行和列的位置定义。

grid-column 这个属性你可能觉得不太好理解,它定义了列的起点和终点。这个地方让你觉得困惑的可能是明明有3列,却为什么定义的范围是1到4,通过下面的图片你就能理解了:

9159.com 11
Click here to see a live example

第一列是从1到2,第二列是从2到3,第三列从3到4,所以头部的grid-column是从1到4占据整个页面,导航的grid-column是从1到2占据第一列等等

一旦你习惯了grid语法,你会觉得它是一种非常理想的CSS布局方式。唯一缺点就是浏览器支持,幸运的是过去一年中浏览器的支持又得到了进一步的提高。作为专为CSS设计的第一款真正的布局工具很难描绘它的重要性,从某种意义上来说,由于现有的工具需要太多的hack和变通方式去实现,因此web设计者过去对于布局的创意上一直很保守,CSS网格的出现有可能会激发出一批从未有过的创意布局设计——想想还是挺激动人心的!

9159.com 12

Sass

属性声明的排序
首先列出除去 @include 和嵌套选择器之外的所有属性声明。紧随后面的是 @include,这样可以使得整个选择器的可读性更高

扩展阅读

  • CSS Preprocessor
  • Sass教程
  • How to Choose the Right CSS Preprocessor
  • CSS Preprocessors: Focused Decisions
  • Sass And LESS: An Introduction To CSS Preprocessors
  • Poll Results: Popularity of CSS Preprocessors
  • On CSS preprocessors
  • Understand the Power of Sass and Why You should use CSS Preprocessors
  • OOCSS & CSS Preprocessors (pt.1)
  • OOCSS & CSS Preprocessors (pt.2
  • 8 CSS preprocessors to speed up development time

ITCSS

  • Settings 全局可用配置,设置开关。$color-ui:#BADA55;$spacing-unit:10px;
  • Tools通用工具函数。@mixin font-color(){font-color:$color-ui;}
  • Generic 通用基础样式。Normalize,reset,boxsizing:border-box;
  • Base 未归类的html元素。ul{list-style: square outside;}
  • Objects设计部分开始使用专用类。.ul-list__item{padding:$spacing-unit};
  • Components 设计符合你们的组件.products-list{@include font-brand();border-top:1px solid $color-ui;}
  • Trumps 重写,只影响一块的DOM。(通常带上我们的!important)(比如只有颜色不一样)

最后我列出一些我将要用到的技巧,并且坚持做下去:

  • 尽量不让自己的样式层级超过三层
  • 尽量不使用!important,通过添加和使用类名,比如.hidden类名
  • 尽量远离Sass中介绍@extend的一般经验法则——他们有些是迷惑人
  • 尽量在样式表中添加注释
  • 让团队写CSS有一个标准规范——Harry Roberts写了一个很有名的CSS指南
  • 此外,应该有一个可以展示元素样式的模块库
  • 使用类似scss-lint工具,让你的SCSS/CSS和规范保持一致
  • 尽量不要使用*这样的全局选择器
  • JavaScript钩子是使用的类名,尽量加上前缀js-
  • 尽量在项目中重复使用类名和模块
  • 取名尽量和Bootstrap框架的组件接近
  • 在样式中避免使用#id

扩展阅读:
www.leemunroe.com/css
https://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html
eslint:

使用CSS预处理器扩展CSS语法

到目前为止,我们介绍了CSS的基本样式和布局,现在我们再来看下那些帮助CSS提升语言本身体验的工具,先从CSS预处理器开始吧。

CSS预处理器允许你使用不同的语言来定义样式,最终会帮你转换为浏览器可以解释的CSS,这一点在当今浏览器对新特性支持缓慢的情况下很有价值。第一个主流的CSS预处理器是2006年发布的Sass,它提供了一个新的更简洁的语法(缩进代替大括号,没有分号等等),同时增加了一些CSS缺失的高级特性,像变量、工具方法还有计算。下面我们使用Sass变量实现下前面例子中带颜色的区域定义:

$dark-color: #4a4a4a $light-color: #f9f9f9 $side-color: #eee body color: $dark-color header, footer background-color: $dark-color color: $light-color main background: $light-color nav, aside background: $side-color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$dark-color: #4a4a4a
$light-color: #f9f9f9
$side-color: #eee
body
  color: $dark-color
  
header, footer
  background-color: $dark-color
  color: $light-color
  
main
  background: $light-color
nav, aside
  background: $side-color

注意我们用$定义了可复用的变量,省略了大括号和分号,语法看起来更加清晰了。简洁的语法让Sass看起来很棒,但变量这样的特性出现在当时来说意义更大,这为编写整洁可维护的CSS代码开辟了新的可能性。
使用Sass你需要安装Ruby(Ruby),这门语言主要是让Sass编译成正常的CSS,同时你需要安装Sass gem,之后你就可以通过命令行把你的.sass文件转成.css文件了,我们先看一个使用命令行的例子:

sass --watch index.sass index.css

1
sass --watch index.sass index.css

这个命令定期把index.sass中的Sass代码转为CSS写入到index.css文件中(--watch参数设定后会实时监听.sass文件改动并执行编译,非常方便)

这个过程被称为构建步骤。这在2006年的时候是非常大的一个障碍,如果你对Ruby这样的编程语言熟悉的话,这个过程非常简单。但是当时很多前端开发者只用HTML和CSS,他们不需要类似这样的工具。因此,为了使用CSS预编译的功能而让一个人学习整个生态系统是很大的一个要求了。

2009年的时候,Less CSS预编译器发布。它也是Ruby写的,并且提供了类似于Sass的功能,关键不同点是它的语法设计上更接近CSS。这意味着任何CSS代码都是合法的Less代码,同样我们看一个用Less语法的例子:

@dark-color: #4a4a4a; @light-color: #f9f9f9; @side-color: #eee; body { color: @dark-color; } header, footer { background-color: @dark-color; color: @light-color; } main { background: @light-color; } nav, aside { background: @side-color; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;
body {
  color: @dark-color;
}
  
header, footer {
  background-color: @dark-color;
  color: @light-color;
}
  
main {
  background: @light-color;
}
nav, aside {
  background: @side-color;
}

语法上几乎是相同的(变量的定义使用@替代了$),但是Less和CSS一样带有大括号和分号,没有Sass例子的代码看起来漂亮。然而,和CSS相近的特性反而让开发者更容易接受它,在2012年,Less使用了JavaScript(Node.js)重写了替换了Ruby,性能上比Ruby编译更快了,并且很多在工作中使用了Node.js的人更容易上手了。

把这段代码转化为标准的CSS,你需要安装Node.js 和 Less,执行的命令行如下:

lessc index.less index.css

1
lessc index.less index.css

这个命令把index.less文件中的Lessz代码转化为标准的CSS代码写入到index.css文件中,注意lessc命令不能监听文件的变化(和sass不一样),这意味着你需要安装其他自动监听和编译的组件来实现该功能,增加了流程的复杂性。同样,对于程序员来说使用命令行的方式并不难,但是对于其他只想使用CSS预编译器的人来说还是个非常大的障碍。

汲取了Less的经验,Sass开发者在2010年发布了一个新的语法叫SCSS(与Less类似的一个CSS超集),同时发布了LibSass,一个基于C++扩展的Ruby引擎,让编译更快并且适配于多种语言。
另外一个CSS预处理器是2010年发布的Stylus,使用Node.js编写,和Sass或者Less相比更注重于清晰的语法。通常主流的CSS预编译器就这三种(Sass,Less,Stylus),他们在功能方面非常相似,所以你不必担心选择哪一个会是错误的。

然而,有些人认为使用CSS预处理器开始变得越来越没必要,因为浏览器最终会慢慢实现这些功能(像变量和计算)。此外,还有一种称为CSS后处理器的方法,有可能会让CSS预处理器过时(显然这存在些争议),我们在后面会详细介绍下。

嵌套选择器

不要让嵌套选择器的深度超过 3 层!

如果有必要_用到嵌套选择器,把它们放到最后,在规则声明和嵌套选择器之间要加上空白,相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。

.btn {
background: green;
font-weight: bold;
@include transition(background 0.5s ease);

.icon {
margin-right: 10px;
}
}

BEM

9159.com 13

好的,我找到了一个新的好玩工具。这个预处理器可以节省大量的时间,但他不能为你写出好的结构。首先,我开始考虑是一个命名约定,让我们来看以下的HTML标签:

JavaScript

<header class="site-header"> <div class="logo"></div> <div class="navigation"></div> </header>

1
2
3
4
&lt;header class=&quot;site-header&quot;&gt;
    &lt;div class=&quot;logo&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;navigation&quot;&gt;&lt;/div&gt;
&lt;/header&gt;

可能会写出对应的样式:

JavaScript

.site-header { ... } .logo { ... } .navigation { ... }

1
2
3
.site-header { ... }
.logo { ... }
.navigation { ... }

这样的样式能正常的工作,但它有一个问题——阅读CSS,让人难于理解。例如,logo是属于header部分的,你可能有另一个logo要放在页脚footer处。那么将添加一个后代选择器来控制:

JavaScript

.site-header .logo { ... }

1
.site-header .logo { ... }

但是使用这些选择器并不是很好的主意,因为它始终需要依赖于特定的标记和结构。一旦你把logo移到<header>外面,样式将会丢失。另外一种做法是给logo添加一个site-header,给其重新命名:

JavaScript

.site-header-logo { ... }

1
.site-header-logo { ... }

很棒了,自己就是说明,但它并不能运用于所有情况之下。例如,我想在12的圣诞节使用一个圣诞节版本的logo。所以,我不能写:

JavaScript

.site-header-logo-xmas { ... }

1
.site-header-logo-xmas { ... }

因为我的逻辑是,写一个选择器要像嵌套HTML标签一样匹配。

BEM可能解决这样的情况。这意味着块(Block)、元素(Element)和修改器(Modifier)和一些创建规则,你可以遵循这些规则。使用BEM,我们的小例将变成:

JavaScript

.site-header { ... } /* block */ .site-header__logo { ... } /* element */ .site-header__logo--xmas { ... } /* modifier */ .site-header__navigation { ... } /* element */

1
2
3
4
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */

也就是说site-header是我们的块。那么logo和navigation是这个块的元素,圣诞版本的logo是修饰符。也许它看起来简单,但是它真的很强大。一旦你开始使用它,会发现他能让你的结构更加的优秀。当然也有反对的理由,那就是因为其语法。是的,或许看起来有点丑,但为了有一个好的结构,我会准备为此做出牺牲。(更好的阅读请点这和这)。

使用CSS后处理器的转换功能

CSS后处理器使用JavaScript分析并转换你的CSS为合法CSS,从这方面来看和CSS预处理器很相似,你可以认为是解决同一个问题的不同方式。关键的不同点是CSS预处理器使用特殊的语法来标记需要转换的地方,而CSS后处理器可以解析转换标准的CSS,并不需要任何特殊的语法。举一个例子来说明下,我们用最初定义的header标签样式来看一下吧:

h1, h2, h3, h4, h5, h6 { **-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;** hyphens: auto; }

1
2
3
4
5
6
h1, h2, h3, h4, h5, h6 {
  **-ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;**
  hyphens: auto;
}

粗体部分的属性成为厂商前缀,厂商前缀是浏览器厂商对CSS新功能的实验和测试使用的,在正式实现前提供给开发者使用CSS新属性的一种方式。-ms代表IE浏览器,-moz是火狐浏览器,-webkit是基于webkit内核的浏览器。

定义这些不同浏览器厂商的前缀属性是非常烦人的,尽量使用生成工具自动添加厂商前缀。我们可以使用CSS预处理器来完成这个功能,例如,我们可以用SCSS来实现:

@mixin hyphens($value) { -ms-hyphens: $value; -moz-hyphens: $value; -webkit-hyphens: $value; hyphens: $value; } h1, h2, h3, h4, h5, h6 { <a href="; hyphens(auto); }

1
2
3
4
5
6
7
8
9
@mixin hyphens($value) {
  -ms-hyphens: $value;
  -moz-hyphens: $value;
  -webkit-hyphens: $value;
  hyphens: $value;
}
h1, h2, h3, h4, h5, h6 {
  <a href="http://www.jobbole.com/members/include">@include</a> hyphens(auto);
}

这个地方使用了Sass的 mixin 功能,你可以定义一个CSS代码块然后在其他任何地方重用,当这个文件被编译成标准的CSS的时候,所有的@include语句都被替换成与之匹配的@mixin中的CSS。总体来说,这个解决方案也不差,但是你仍然要为每个需要厂商前缀的的CSS属性定义一个mixin,这些mixin的定义将需要不断的维护,比如当浏览器支持了某个CSS属性后你就要在你的定义中移除掉该属性。

比起写mixin的方式,直接正常写CSS然后由工具自动识别添加需要厂商前缀的属性的方式显然更优雅些。CSS后处理器就恰好能完成这样的功能。比如,如果你使用 PostCSS 和 autoprefixer 插件,你就可以直接写正常的CSS并不需要指定浏览器厂商前缀,剩下的工作全交给后置处理器去处理:

h1, h2, h3, h4, h5, h6 { hyphens: auto; }

1
2
3
h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
}

当你使用CSS后处理器运行这段代码的时候hyphens: auto; 将被替换成包含所有浏览器厂商前缀的属性,这意味着你可以正常写CSS不用担心各种浏览器兼容性问题,岂不是很棒!
除了PostCSS的autoprefixer插件还有很多有意思的插件,cssnext 插件可以让你体验下一些实验性质的CSS新功能,CSS modules 可以自动改变class的名字避免名称冲突,stylelint 能检查出你CSS代码中一些定义错误和不符合规范的写法。这些工具在过去一两年里开始流行起来,给开发者提供了从未有过的工程化流程。

然而,进程的发展总是有代价的,安装和使用CSS后处理比CSS预处理器更复杂。你不仅要安装、执行命令行,还需要安装配置各个插件并且定义好各种复杂的规则(比如你的目标浏览器等)。很多开发者不再直接使用命令行运行PostCSS了,而是通过配置一些构建系统,像Grunt 、Gulp 、webpack,他们可以帮助你管理前端开发工作中需要的各种构建工具。

值得注意的是对于CSS后处理器存在些争议,有人认为这个术语有些让人迷惑(一种说法是建议都应该叫CSS预处理器,还有一种说法是应该都简称CSS处理器,等等),有人认为有了CSS后处理器完全可以不需要CSS预处理器,有人则主张两者一起使用。不管怎么说,去了解下CSS后处理器的使用还是非常值得的。

9159.com 14

变量

变量名应使用破折号(例如 $my-variable)代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀(例如 $_my-variable)

扩展阅读

  • BEM
  • BEM Methodlogy
  • A New Front-End Methodology: BEM
  • Maintainable CSS with BEM
  • BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS
  • What is BEM?
  • Thoughts About SCSS and BEM

使用CSS设计模式

CSS预处理器和CSS后处理器让CSS开发体验有了巨大的提升,但是单靠这些工具还不足以解决维护大型项目CSS代码的问题。为了解决这个问题,人们编写了一些关于如何写CSS的指导方针,通常被称为CSS规范。

在我们深入分析CSS规范前,首先要搞清楚是什么让CSS随着时间推移变得更加难维护,关键点是CSS是全局性的——你定义的每个样式都会全局应用到页面的每个部分,用一个命名约定来保证class名称的唯一性或者有特殊的规则来决定指定样式应用到指定元素。CSS规范提供了一个有组织性的方式来避免大量代码时出现的这些问题,让我们按照时间顺序来看看主流的一些规范吧

css分类

按照css的性质和用途,我们可以将css文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”,并以此为顺序引用。那么他们分别是什么呢?

  • 公共型样式是最为重要的部分,对于比较小的项目,我们只引入一个css,这个css的样式即公共型样式,一般包括:“标签的重置和设置默认值”(以消除不同浏览器之间的差异)、“统一调用背景图和清除浮动或其他需统一处理的长样式(这样就无需对每个进行分别的处理)”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。后面会具体介绍。
  • 特殊型样式即对某个维护率较高的栏目或者某个与网站整体差异较大的页面独立引入这样一个特殊型样式,方便我们维护。
  • 皮肤型样式即产品需要换肤功能,那么我们就需要将颜色、背景等抽离出来放在这里,方便管理。

css文件我们分为了公共型样式、特殊型样式、皮肤型样式,那么在css文件的内部我们又是怎么分类的呢?(此部分为重点

  • 重置和默认的css代码。这是为了

    消除默认样式和浏览器的差异

    ,并设置部分标签的初始样式,**以减少后面的重复劳动。 **你可以根据自己的网站需求设置,也可以使用别人写好的一些初始化代码,比如:雅虎工程师提供的css初始化代码。这一部分代码放在css内部的最上面。

  • **统一处理的css代码。 **这里可以统一调用背景图和清除浮动(指通用性较高的布局、模块、原件内的清楚),实际上,雅虎工程师提供的css初始化代码中就有清除浮动的css代码。这一部分代码放在重置和默认的css代码下面。

  • 布局(grid): 我们将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等。常用!

  • 模块(module):即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用!

  • 元件(unit):通常是一个不可再分的较为小巧的个体,被重复用于各种模块中,比如按钮、输入框、loading、图表等。常用!

  • 功能(function):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动。不常用,不可滥用!

  • 皮肤(skin):对于换肤型网站需要使用,将皮肤型的样式抽离出来,非换肤型网站不可滥用,不常用。

  • 状态:即一些状态类样式。不常用。

OOCSS

9159.com 15

自从我发现BEM,我就开始在思考如何正确的使用我的类名。也许,我的第一件事情要读一篇关于面向对象的CSS。面向对象编程添加了一些抽像的概念,CSS也支持这样的概念。如果你使用了CSS预处理器,你或多或少知道一些。做为一个编写代码的人,我发现这个概念离我平时编程很近,拿JavaScript为例,有两个主要原则:

OOCSS

OOCSS(面向对象的CSS)是在2009年首次提出的,它是围绕两个原则建立的规范。第一个原则是结构和样式分离,这意味着定义结构(布局)的CSS不应该和定义样式(颜色、字体等)的CSS混杂在一起,这样我们就可以很简单的为一个应用定义新的皮肤了;第二个原则是容器和内容分离,把元素看成是一个可重用的对象,关键核心点是一个对象不管用在页面的任何位置都应该看起来是相同的。

OOCSS提供了成熟的指导规范,但是对于具体的执行规范并没有明确指出。后来出现的SMACSS采用了它的核心概念,并且添加了更多的细节,使用起来更简单了。

css代码格式

1.

选择器、属性和值都是用小写。

这一点非常关键:根据xhtml规范,所有的标签属性和值都要使用小写形式,而我们知道xhtml更为标准,所以最好遵循之,这样,选择器必须小写就是十分必要的了。既然这样我们就不能使用驼峰式写法来写类名了,如class="u-leftArrow"实际上就是不规范的了,最好写成class="u-left_arrow",也可以表达相同的意思。

单行写完一个选择器定义。

优点:便于选择器的寻找和阅读,也便于插入新的选择器和编辑,便于模块等的识别。更重要的是可以去除多余空格,使代码紧凑减少换行。试想,如果每一行只有一个属性名和属性值,那么对于一个大项目而言,就很难做到选择器的寻找和阅读了,而使用一行写完一个选择器,那么就有可能缩短为1/6到1/10,这还是非常客观的。

3.最后一个值也要一分号结尾。

实际上,在大括号结束前的值可以省略分号,但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。比如,在最后添加一个属性,如果之前没有在末尾添加分号,那么你就要在新添加的属性前添加分号,否则就会出错,比如在我的一篇博文为解决中文字体显示为方框添加JSON数据时就出现过此类问题。

4.省略值为0的单位

优点:可以节省不必要的字节同时也为了方便阅读,我们将0px、0em、0%等都缩写为0.如下所示:

|

1

|

.m-box{``margin``:``0

10px``; backgrond-``position``:``50%

0``;}

|

5.使用16进制表示颜色值,其中的字母使用大写形式,并尽量缩写。

除非在你需要透明度而使用rgba,否则都是用#FFFFFF这样的写法,并尽量缩写,如#FFF。使用大写形式,是因为这样更加具有易读性,且有利于压缩,而缩写为了减少不必要的字节。

(补充说明:博友@batsing 指出在PC端使用16进制表示颜色,IE8及以下不兼容,在此表示感谢,希望大家也可以注意这个问题。)

6.

根据属性的重要性顺序书写。

       在上面的第二点我们说到应当在单行写完一个选择器。如果我们不遵循一定的书写顺序,那么写出来的代码一定是混乱的,那么怎么才能写出优雅的css代码呢?这时就需要根据属性的重要性顺序书写。如下图所示:

[图片上传失败...(image-f697a2-1514166666759)]

注意:只遵循横向顺序即可,即**先书写定位布局类属性,在书写盒模型等自身属性,最后书写文本类及修饰类属性。 **另外,如果属性间存在关联性,则不要隔开写,如下所示。

|

1

|

.m-box{``position``:``relative``;``height``:``20px``;``line-height``:``20px``; padding``:``5px``;``color``:``#000``;}

|

其中的height和line-height具有关联性,我们尽量不要分开写。

7.私有在前,标准在后。

先写带有浏览器私有标志的属性,后写W3C标准的属性。因为私有的属性,说明浏览器自身还没有规范化,标准属性是用不了的。若某一天该浏览器的属性规范化了,那么说明标准属性可以使用了,而如果我们先写W3C标准属性,最后写私有属性,就有可能导致私有属性覆盖标准属性。因此私有在前,标准在后的写法是考虑到了以后可能会出现的问题。

如:

|

1

|

.m-box{-webkit-box-shadow:``0

0

0

#000``;-moz-box-shadow:``0

0

0

#000``;box-shadow:``0

0

0

#000``;}

|

  8.选择器等级

!important>行内样式style>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器

  9.css内部的顺序

    我认为,对于一个网页而言,我们在写css时,可以分为几个部分来写,比如header部分的css代码,main部分的css代码,部分之间通过空格隔开并给以响应的注释,这样更有利于我们的阅读和后期的维护,如下所示。
10.优化方案:对于可以缩写的值我们尽量采用缩写形式,这样有利于减小css文件大小,并增加可读性和可维护性。且最好尽量减少没有实际作用的冗余的属性。有时我们会将定义相同的或者有大部分属性值相同的一系列的选择器组合到一起(采用逗号的方法)来统一定义,这样可以为你节省很多字节和宝贵时间。
类选择器的命名建议
  在前面说到,命名className时,应当以其作用、功能来命名,而不要使用没有语义化或者以颜色、左右空间位置的文字来命名。

1. 对于布局,即用.g-作为前缀,通常有以下推荐的写法。

头部: header或head

主体: body

尾部:footer或foot

主栏: main

侧栏:side

盒容器: wrap或box

主栏子容器:mainc

侧栏子容器:sidec

2.对于模块,即.m-作为前缀。元件,.u-作为前缀,通常有下面推荐的写法。

导航: nav

子导航:subnav

菜单:menu

选项卡:tab

标题区:head或title

内容区:body或content

列表:list

表格:table

表单:form

排行:top

热点:hot

登录:login

标志:logo

广告:adervertise

搜索:search

幻灯:slide

帮助:help

新闻:news

下载:download

注册:register或regist

投票:vote

版权:copyright

结果:result

按钮:button

输入:input

3.对于功能,即以.f-为前缀,通常推荐如下:

清除浮动:clearboth

向左浮动:floatleft

向右浮动: floatright

溢出隐藏:overflowhidden

4.对于颜色,即以.s-为前缀,通常推荐如下:

字体颜色:fontcolor

背景:background

背景颜色:backgroundcolor

背景图片:backgroundimage

背景定位:backgroundposition

边框颜色:bordercolor

5.对于状态,即以.z-为前缀,通常推荐如下:

选中:selected

当前:current

显示:show

隐藏:hide

打开:open

关闭:close

出错:error

不可用:disabled

单独的结构和样式

我们用下面的例子来进行介绍:

JavaScript

.header { background: #BADA55; color: #000; width: 960px; margin: 0 auto; } .footer { background: #BADA55; text-align: center; color: #000; padding-top: 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
.header {
    background: #BADA55;
    color: #000;
    width: 960px;
    margin: 0 auto;
}
.footer {
    background: #BADA55;
    text-align: center;
    color: #000;
    padding-top: 20px;
}

其中有一些样式是重复的,我们可以考虑在另一个类中提取这些相同的样式:

JavaScript

.colors-skin { background: #BADA55; color: #000; } .header { width: 960px; margin: 0 auto; } .footer { text-align: center; padding-top: 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
.colors-skin {
    background: #BADA55;
    color: #000;
}
.header {
    width: 960px;
    margin: 0 auto;
}
.footer {
    text-align: center;
    padding-top: 20px;
}

所以我们使用colors-skin做为一个对象,用来扩展。这样HTML模板修改成像这样:

JavaScript

<div class="header colors-skin"> ... </div> <div class="colors-skin"> ... </div> <div class="footer colors-skin"> ... </div>

1
2
3
&lt;div class=&quot;header colors-skin&quot;&gt; ... &lt;/div&gt;
&lt;div class=&quot;colors-skin&quot;&gt; ... &lt;/div&gt;
&lt;div class=&quot;footer colors-skin&quot;&gt; ... &lt;/div&gt;

这样做有几个好处:

  • 有一个类,它可以使用多次
  • 如果需要修改,只需要修改一个地方
  • 在CSS样式中删除重复的代码,使其文件变得更低

SMACSS

SMACSS(可扩展模块化架构的CSS)是在2011年出现的一种设计模式,它将CSS分为5个不同的类别——基本规范、布局规范、模块、状态规范和样式规范。SMACSS也有一些推荐的命名规则,对于布局规范使用l-或者layout- 作为前缀;对于状态规范,使用is-hidden 或者is-collapsed 作为前缀。

相比OOCSS,SMACSS有了更多细节上的规范,但是CSS规则该划分为哪一类别的规范中,这是个需要仔细考虑的问题。后来出现的BEM对这一方面进行了改进,让它更易使用了。

独立的容器和内容

这里的想法是,每个元素应该有相同的样式,不管他放在何处。所以,你应该尽量避免使用像下面演示的选择器:

JavaScript

.header .social-widget { width: 250px; }

1
2
3
.header .social-widget {
    width: 250px;
}

如果你把.social-widget移动.header容器的外面,那么.social-widget的宽度就变了。尤其是用在页面上的组件。这也是我鼓励CSS模块化以及我强烈建议采用更多的时间去尝试。就我个人而言,以下的原则会将CSS写得更好。

BEM

BEM (块, 元素, 修饰符)是在2010年出现的规范,它的思想主要是围绕把用户界面切分成独立的块。块是一个可重用的组件(举个例子像表单搜索,可以这样定义``

),元素是块的一部分不能单独重用(比如表单搜索中的button,),修饰符是定义了块或者元素外观、状态或者行为的实体(比如禁用搜索按钮,定义为``)。

BEM的规范很容易理解,对于新手来说命名规则上也很友好,缺点就是可能会导致class名字非常长,并且没有遵循传统的命名规范。后来出现的Atomic CSS又把这个非传统方式带到了一个新的高度。

框架

如果你在GitHub上打开OOCSS库你可以看到一个框架。是的,这个框架使用了面向对象的概念,他的CSS有很多很优秀的现成组件。很长一段时间我并不喜欢框架。如果你有在工作使用框架,你会发现他分为两个部分。事实上,你使用框架处理一些事情,你必须遵守他的规则。不过我更喜欢使用一些微小的框架。当然我不是说我得重新去造轮子,但我总是试图去寻找一种平衡。通常现成的解决方案导致系统的混乱和复杂。我建议是为一定的目的建立一个特定的东西。如果你试图去覆盖一些东西,你总是想到框架中的东西。

但事,我强烈建议你去查寻一个OOCSS框架。这是一个独特的知识块,也许它将适合用在你需要的地方。最早是由Nicole Sullivan提出这样的一个概念。如果你对OOCSS有什么意向或者想法,可到这里参加讨论。

Atomic CSS

Atomic CSS (也称为 功能性CSS)是2014年出现的一个规范,它的思想是基于可视化的方法创建小而功能单一化的class。这种规范与OOCSS、SMACSS和BEM完全相反——它并不是把页面上的元素看做是可重用的对象,Atomic CSS忽略掉了这些对象,每一个元素使用了可重用的单一功能的class样式集合。因此像就被替换成这样的写法了``

如果你看到这个例子第一反应是被吓的退缩了,没关系你并不是唯一有这想法的人——很多人认为这种方式完全违背了CSS的最佳实践,但是,关于这个有争议的规范在不同场景下的应用也产出了一系列精彩的讨论。这篇文章很清晰的分析了传统的分离思想是CSS依赖于HTML创建(即使使用像BEM这类的规范),而Atomic的方式是HTML依赖于CSS创建,两者都没错,但是仔细想想你会发现CSS和HTML彻底分离的想法是实现不了的。

其他的CSS设计模式,像CSS in JS其实也包含了CSS和HTML相互依赖的思想,这也成为了一个饱受争议的设计规范之一。

扩展阅读

  • OOCSS
  • Object-Oriented CSS
  • An Introduction To Object Oriented CSS (OOCSS)
  • The Future of OOCSS: A Proposal
  • The flag object
  • CSS Performance and OOCSS
  • OOCSS, for Great Justice
  • Nicole Sullivan Talks OOCSS and Process

CSS in JS

CSS in JS 是2014年推出的一种设计模式,它的核心思想是把CSS直接写到各自组件中,而不是单独的样式文件里。这种方式在React框架中引入的,最早是使用内联样式,后来又进化成了使用JavaScript生成CSS然后插入到页面的style标签中的方式。

CSS in JS再一次违背了CSS中关于分离的最佳实践,主要原因是web随着时间推移发生了很大的变化。最初web大部分都是静态网站——这种情况下HTML内容和CSS表现分离是很有意义的,但现在大部分应用都是动态web构建——这种情况下可重用的组件更加有意义了。

CSS in JS设计的目标是定义边界清晰包含自己HTML/CSS/JS的独立组件,并且不受其他组件的影响。React是最早采用这种思想的框架,后续也影响到了其他框架像Angular、Ember和Vue.js。需要注意的是CSS in JS的模式相对来说比较新的,开发人员正在不断的尝试开发web应用组件时的一些CSS最佳实践。

9159.com,五花八门的设计模式很容易让你不知所措,最重要的记住一点——没有银弹。

SMACSS

9159.com 16

另一个流行的概念是SMACSS。SMACSS代表可伸缩的和是模块化的CSS结构体系。Jonathan Snook为CSS开发人员介绍了类似于这样的样式指南。为了单独的应用程序将其分为以下几类:

  • 基本(base):用于一个简单的选择器的基本样式,如clearfix
  • d布局(Layout):定义网格
  • 模块(Module):一群元素相结合在一起形成的一个模块,比如说header和sidebar
  • 状态(State):元素的不同状态。如隐藏、按住,扩大等规则定义给对象
  • 主题(Them):更多的样式

我没有使用SMACSS的任何经验,便它是非常受欢迎,实际上也能促进你有更好的想法。这比一个框架的概念更强。所以,你不需要遵循任何严格的规则、类或者组件。

结论

简而言之这就是现代CSS。我们介绍了CSS基本排版样式,浮动布局、flexbox和grid布局,了解了CSS预处理器为CSS提供的新语法,比如变量和mixins,还了解了CSS后处理器的转换功能,像给CSS添加厂商前缀,并且使用CSS的一些设计模式克服了全局CSS的一些问题。在这里我们没有时间去挖掘更多CSS其他功能了,CSS覆盖面太广了——任何一个说它简单的人可能只是对它一知半解吧!

现代CSS的多变和快速发展多少让人感到有些沮丧,但是重要的是要记住web随着时间推移进化的历史背景,并且有一群聪明的人愿意为CSS向更好的方向的进化去创建一些工具和指导规范。作为一名开发者是一件幸运的事情,我希望这篇文章提供的信息能作为一个路线图帮助你更好的畅行在CSS路程中!

9159.com 17

2 赞 5 收藏 评论

9159.com 18

扩展阅读

  • Scalable and Modular Architecture for CSS
  • SMACSS: Notes On Usage
  • An Introduction To SMACSS Guidelines For Writing CSS
  • Let’s Talk SMACSS, Man
  • SMACSS

Atomic Design

9159.com 19

知道了OOCSS和SMACSS后,请允许我找一个恰当的比喻,请快速登录这个页面。这里展示了一个伟大的原子设计概念。它的作者是Brad Frost,众所周知,他是一位有名的Web开发人员,致力于响应式设计和移动端开发。

这个想法是非常有趣的。以下是一些术语,我们可以说,物质的基本单位是原子。Brad Frost说我们的页面是用移动的原子构建,一个原子可以是:

JavaScript

<label>Search the site</label>

1
&lt;label&gt;Search the site&lt;/label&gt;

或者

JavaScript

<input type="text" placeholder="enter keyword" />

1
&lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;

也就是说原子是包括了一些基本样式的DOM元素。如颜色、字体大小或者过渡动画。后来这些部分可以结合成分子,例如:

JavaScript

<form> <label>Search the site</label> <input type="text" placeholder="enter keyword" /> <input type="submit" value="search" /> </form>

1
2
3
4
5
&lt;form&gt;
    &lt;label&gt;Search the site&lt;/label&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;
    &lt;input type=&quot;submit&quot; value=&quot;search&quot; /&gt;
&lt;/form&gt;

所以表单元素包含了几个原子。这样抽象带来的灵活性,因为我们可以使用相同的原子来构建另一个分子。这样一来,我们在不同的上下文中可以重用相同的形式:

Brad Frost并没有停止。生特体是构建分子的东西,遵循同样的方法,我们可以编写以下的结构,并将其称为有机体:

JavaScript

<header> <div class="logo"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contacts</a></li> </ul> </nav> <form> <label>Search the site</label> <input type="text" placeholder="enter keyword" /> <input type="submit" value="search" /> </form> </header>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
&lt;header&gt;
    &lt;div class=&quot;logo&quot;&gt; &lt;/div&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacts&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;form&gt;
        &lt;label&gt;Search the site&lt;/label&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;
        &lt;input type=&quot;submit&quot; value=&quot;search&quot; /&gt;
    &lt;/form&gt;
&lt;/header&gt;

第二件事是模板的概念。他们不是直接相关的化学反应,但被放入了Web的上下文。一旦我们开始结合不同的生物构建我们的模板。后来这些模板形式就是我们最后得到的页面。

你可能已经使用类似的方法来构建应用程序。然而,命名的东西以一种合理的主式带来良好的结构。在开发中,你和你的队友会有很多事情需要去弄明白。分离的原子和分子是很重要的部分,因为它提高了工作效率和让你更好的维护您的Web应用程序。

扩展阅读

  • Atomic Design
  • The “Other” Interface: Atomic Design With Sass
  • Atomic Design: Some Thoughts and One Example

OrganicCSS

9159.com 20

两个月前,我写了一篇文章,是有关于Organic的,他是一个用JavaScript写的一个伟大的小框架。它更像是一种设计模式,我个人非常喜欢。我甚至在好几个项目中使用了它,并且一切都很顺利。如果你有兴趣的话,我强烈推荐您阅读这篇文章。

当我阅读了Brad Frost的文章,我就已经有了类似于的概念,因为我知道Organic。Brad做的非常的棒,但是我决定更深入的去了解,或尝试自己在基于原子设计概念的基础上写一个小型的框架。我最终选择了Sass作为预处理器和在Github上创建了一库organic-css。

原子(Atoms)

让我匀先从框架最小的一部分开始——原子。维基百科是这样定义的,原子是物质的基本单位。在CSS中,我认为它是一个属性和一个属性值,例如:

JavaScript

margin-top: 24px;

1
margin-top: 24px;

仅仅为了写样式添加原子而直接添加类名,这并不是我想要的,如果有一个这样的类型:

JavaScript

body { margin-top: 24px; } header { margin-top: 24px; }

1
2
3
4
5
6
body {
    margin-top: 24px;
}
header {
    margin-top: 24px;  
}

预处理器将会失去他自己作用,因为我想要的结果是这样的:

JavaScript

body, header { margin-top: 24px; }

1
2
3
body, header {
    margin-top: 24px;
}

在Sass中可以使用placeholders的功能,例如:

JavaScript

%margin-top-24 { margin-top: 24px; } body { @extend %margin-top-24; } header { @extend %margin-top-24; }

1
2
3
4
5
6
7
8
9
10
%margin-top-24 {
 
    margin-top: 24px;
}
body {
    @extend %margin-top-24;
}
header {
    @extend %margin-top-24;
}

所以我不得不使用placeholder。这也意味着,我必须要定义很多placeholders,才能使用。在那一刻,我决定,这个框架将只包含原子。也许有一些分子和通用的函数,例如reset.css、网格的定义等等。我想写点东西,作为一个基础的CSS开发。也许我会看到项目中的一些模式,将其放在核心处,作为一个开始,并保持干净和简单。

事情变得更加的一致化,我创建了一个mixin作为一个原子。如这个例子:

JavaScript

@include define-atom("block") { display: block; } @include define-atom("font-family") { font-family: Georgia; }

1
2
3
4
5
6
@include define-atom(&quot;block&quot;) {
    display: block;
}
@include define-atom(&quot;font-family&quot;) {
    font-family: Georgia;
}

使用这种方法,我创建了一个原子群,并且可以很容易的适合用于每一个项目。你可以点击查看。我并且拿其他的框架作为对比,让我更好的去实践,从中学到很多东西。还可以制作一个mixin分子,将原子相结合在一起:

JavaScript

@mixin header { // <- molecule called 'header' @include atoms(( block, clearfix, font-family )); }

1
2
3
4
5
6
7
@mixin header { // &lt;- molecule called &#039;header&#039;
    @include atoms((
        block,
        clearfix,
        font-family
    ));
}

分子(Molecules)

分子是一个DOM元素需要样式,但他没有子元素。或者他有子元素,便也不会直接连接到它。如<img src=”logo.jpg” />,可能是一个分子。如果你很难在你的页面识别这些分子,只需要想到什么是由原子构建就行。有些元素也有可能是构建其他分子的原子。如:

JavaScript

@mixin login-box { @include atoms(( block, font-size-20, margin-top-23, bold )); }

1
2
3
4
5
6
7
8
@mixin login-box {
    @include atoms((
        block,
        font-size-20,
        margin-top-23,
        bold
    ));
}

我们将面对一些很有趣的事。比如说我们的body标签。他是什么呢?它是一个分子或其他什么吗?当然,这需要一些样式,但一般在原子中包含其他分子。它应该是其他东西。我的结论是,CSS应该是主要部分,也就是说,如果body样式需要几个原子,那么他就是一个分子。这也就意味着,从理论上讲,我不应该附加任何其他的分子给它。这看起来有点不切实际,但在大多数情况下,会让你使用不同的选择器,这将是一个好的发展迹象。

细胞器(Organelles)

一旦你认识到这个DOM元素是分子,那么你可以将其看到是一个细胞器。例如,典型的表单元素是一个很好的细胞器例子,他包含像label、input和textarea这样的分子。

JavaScript

.login-form { @include label; @include input; @include textarea; }

1
2
3
4
5
.login-form {
    @include label;
    @include input;
    @include textarea;
}

这些也许是框轲中的一部分,它紧密的连接到当前应用程序中。原子和分子可能在不同项目之间移动,而细胞器是不可能会移动的。

更抽象(More abstractions)

很多时候你可能想把几个别的东西放在一起,这样细胞器变得更加抽象:

JavaScript

Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism

1
Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism

这将面对一个选择问题,你将如何构建你的CSS。我以前只在一个项目中使用OrganicCSS,到目前为止,我还可以说他是清晰的。我把不同的元素放在他们自己的目录中和按他们的名命名,这样我可以很容易的找到他们,并做相应的处理。例如,如果有一个细胞器称为header,我只需要将其修改为o-header。后来,让我读到HTML标记,我就可以看到该元素的CSS样式就在细胞器文件夹中。

扩展阅读

  • Micro framework following atomic design.

总结

这是一个很有趣的旅程。我不知道我将来会不会使用OrganicCSS,但这并不是最重要的部分。我能从中学到东西才是最重要的。我知道我必须改变我们的CSS开发过程,我做到了。我认为我们应该多谈谈CSS的框架。你可以看到我们有很多好的资源。我们必须找到他们,学习他们做什么以及如何工作。只有这样我们才可以决定是否使用他们。更好的是,当你看到整个图片你可以创造一些更适合你的需求。

特别声明:本文有很多概念也是初次接触,就对此文进行翻译,如果有理解错语的地方,希望不会给您带来误解,同时更希望这译文能改变你对CSS的构建方式,从而找出更适合您或您团队使用CSS的最佳方式。最后希望更多的同行朋友能指正文中不正确的地方和分享相关的资源(^_^)

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

赞 2 收藏 1 评论

9159.com 21

本文由9159.com发布于前端,转载请注明出处:比如说表单按钮,   译文出处

关键词:

上一篇:没有了
下一篇:没有了