网易邮箱的CSS开发(一)

2012/06/03 · CSS ·
CSS

来源:网易邮箱的博客

网易邮箱是个庞大而且细节繁多的系统,注定了前端开发中样式管理的复杂程度非常高。如果没有一个合理的体系来管理样式,开发和维护的难度是不可想象的。从极速3.5版本开始,我们就一直遵循并不断改善这套规则,现在就来分享一下~

开发思想

在错综复杂的样式面前,CSS显得过于简陋。于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式。

我们借鉴了“面向对象”中的“封装”和“继承”来开发CSS,使我们能很大程度上重用CSS代码的同时又不至于在修改CSS代码时因为过度重用而难以下手。

每个页面都由很多元素(除非特别指出,本文的“元素”都不是指这样的HTML元素)组成,元素可以大到整个界面框架,也可以小到一个图标。元素相互嵌套、组合,形成了最终的页面。

对于任意元素,我们建立这样一种模型:

1、所有的元素内部都可以嵌套其他元素;

如:“a”里可以嵌套“a的头”、“b”等。

澳门微尼斯人手机版 1

2、元素内部的元素中,有的是“私有的”,只能在这个元素内使用,其样式也不会受父元素之外的CSS规则影响,有的是“公有的”,可以出现在任何位置;

如:“a的头”、“a的身体”是“a”的私有元素,“a的身体的某部分”是“a的身体”的私有元素,而“b”是公有元素,被“a”调用,“a”可以修改其内部的“b”的样式,但不能修改其他“b”的样式。

3、元素根据需要可以具备多种状态,可以给这个元素一个“参数”让它呈现不同状态;

如:设一个hasBorder=“true”可以让“a”有边框,设一个size=“big”可以让”a的身体的某部分”变大

4、可以从一类元素派生出另一类元素

如:我们需要和“a”类似的元素,但是需要对其进行扩展,这时我们新建一类“a2”元素,“a2”继承了“a”的所有样式和“私有元素”和“参数”

开发时,元素就像“类”一样被定义在CSS中,元素的“私有元素”、“参数”等也都定义在这个“类”中。

CSS类定义:

XHTML

/* a类 =================================*/ /* a类的定义 */ .a {…}
/* a类的私有元素 */ .a的头{…} .a的身体{…} .a的身体的某部分{…}
/* a类的参数 */ .a(hasBorder时){…} .a(size为big时){…}
HTML中的a类元素的两个“实例”: <div class=”a” id=”a1″> <div
class=”a的头”></div> </div> <div class=”a” id=”a2″>
<div class=”a的头”></div> <div
class=”a的身体”></div> <div class=”b”></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* a类
=================================*/
/* a类的定义 */
.a {…}
/* a类的私有元素 */
.a的头{…}
.a的身体{…}
.a的身体的某部分{…}
/* a类的参数 */
.a(hasBorder时){…}
.a(size为big时){…}
 
HTML中的a类元素的两个“实例”:
<div class="a" id="a1">
<div class="a的头"></div>
</div>
<div class="a" id="a2">
<div class="a的头"></div>
<div class="a的身体"></div>
<div class="b"></div>
</div>

命名和编码规则

以上所说的模型并不是CSS与生俱来的,所以需要一些命名和编码规则来加以实现,不过这个并不复杂。

1、我们使用连字符“-”从逻辑上划分class名,使用驼峰式命名区分单词;

如:.a-b-helloWorld

2、有时我们会给class加上一个命名空间前缀,命名空间与class之间也用连字符“-”连接;

如:.WB3-a-b-helloWorld,在极速4中,WB3命名空间下的class名将被压缩成1~3个字母短名称。(注:WB3是网易邮箱前端吊丝们给极速4起的开发代号……三楼水吧WaterBar3,碉堡了-。-……)

3、“私有元素”必须以父元素的class名作为前缀;

如:“a的身体的某部分”的名称是j,而它的父元素“a的身体”的名称是bd,“a”的名称是a,那么最后连起来的class就是.a-bd-j。

CSS

/* a类定义 =================================*/ .a{…} .a-bd-j{…}
/* 允许在a类中定义a类的私有元素 */ /* b类定义
=================================*/ .b{…} .a-bd-j{…} /*
不允许在a类外定义a类的私有元素 */

1
2
3
4
5
6
7
8
/* a类定义
=================================*/
.a{…}
.a-bd-j{…} /* 允许在a类中定义a类的私有元素 */
/* b类定义
=================================*/
.b{…}
.a-bd-j{…} /* 不允许在a类外定义a类的私有元素 */

 

4、“参数”依然使用class实现,以能表达“是否”或具体取值的方式命名:

如:.hasIcon表达有图标,.hasBorder表达有边框,.sizeBig表达大尺寸的,.sizeSmall表达小尺寸的

***这里是一个理想状态(无IE6)下的命名方案,假设元素a提供以上状态,我们可以这样实现:

CSS

.a.hasIcon{…} .a.sizeBig{…} …

1
2
3
.a.hasIcon{…}
.a.sizeBig{…}

为了IE6,我们不得不用这样的命名来兼容:

CSS

.a-hasIcon{…} .a-sizeBig{…} …

1
2
3
.a-hasIcon{…}
.a-sizeBig{…}

5、从一类派生出另一类元素,命名上没有特别的要求,通过在HTML中的class同时写上基类和子类的class来实现;

 

CSS

/* 基类定义 =================================*/ .superclass{…}
.superclass-element{…} /* 子类定义,扩展、重写基类定义
=================================*/ .myClass{…} .myClass-element{…}
.myClass .superclass-element{…}

1
2
3
4
5
6
7
8
9
/* 基类定义
=================================*/
.superclass{…}
.superclass-element{…}
/* 子类定义,扩展、重写基类定义
=================================*/
.myClass{…}
.myClass-element{…}
.myClass .superclass-element{…}

 

 

by Sunji

 

赞 收藏
评论

澳门微尼斯人手机版 2

PostCSS深入学习:设置选项

2015/10/28 · CSS ·
POSTCSS

澳门微尼斯人手机版,原文出处: Kezz
Bracey   译文出处:大漠   

欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中,可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。

在这篇文章中,我们将先告诉你如何设置PostCSS选项,所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。

马上让我们看看如何开始玩PostCSS。

谈谈网页设计中的字体应用(4):实战应用篇·下

2015/03/30 · CSS,
HTML5 ·
字体

原文出处:
棕熊的博客   

Yoho, 大家好,又是我哟~

首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续关注哦。

上次我讲了在实际应用font-family时会遇到的浏览器兼容性问题。这次我
要从操作系统方面来讲如何安排字体族。另外,由于中文字体的选择范围实在太小,所以本章中设计的内容主要以西文字体为主,比较适合上一章中的“方案二”。

CodePen中设置PostCSS

如果你是第一次接触PostCSS,那么通过CodePen来使用它是最快方式。

CodePen已预先集成了PostCSS,并且还支持下面所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

这些插件可以让你支持未来的CSS语法、像Sass一样的函数、注释的删除和代码的缩写等等。

首先在CodePen在线编辑器上点击”NewPen“创建一个新的页面。然后单击CSS窗口左上角的小齿轮图标,在弹出的面板中设置。

澳门微尼斯人手机版 3

单击“CSS
Preprocessor
”下拉选项,你可以选择下拉选项中的“PostCSS”选项。你也可以在”Vendor
Prefixing
“中选择“Autoprefixer”插件。

澳门微尼斯人手机版 4

然后你可以点击“Need an
add-on
”按钮,在弹出的面板中选择你需要的插件。在弹出的面板将会显示@规则插件,复制粘贴这些@规则对应的PostCSS插件到你的CSS面板中,并且开始使用。

澳门微尼斯人手机版 5

– 不同操作系统的常用字体

如何让你的字体在任何系统,任何电脑上都看起来一致?

原则很简单。尽可能使用所有操作系统都存在的字体。虽然听起来比较简单,但是其实还是很tricky的一件事情。为此,你首先需要了解常用的操作系统的字体。

下面我会列出一些除了windows以外的常用操作的默认字体。windows么……想来大家应该已经很熟悉了

CodePen用法的例子

让多们看看如何在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板顶部,添加你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了这条代码,你将可以使用cssnext官网上描述的所有功能特性。比如,我们使用CSS的变量和函数给body设置一个background颜色。

首先,使用:root定义CSS变量。在CSS面板中添加像下面这样的代码:

:root { –body_bg_color: black; }

1
2
3
:root {
  –body_bg_color: black;
}

可以像下面的代码那样调用CSS的变量:

body { background: var(–body_bg_color); }

1
2
3
body {
  background: var(–body_bg_color);
}

这个时候你应该看到了预览面板上的背景颜色变成了black。你也可以点击CSS面板右上角的”View
Compiled
“按钮看到生成的代码:

澳门微尼斯人手机版 6

接下来,假设我们想让背景颜色不要是全黑色,想变亮一点。我们可以使用未来的语法修改颜色。

在上面声明的CSS变量中,修改--body_bg_color变量值,从black变成:

–body_bg_color: color(black lightness(20%));

1
–body_bg_color: color(black lightness(20%));

这是一个lightness()函数,在black颜色上调20%的亮度,这个时候你可以看到背景颜色从黑色变成了深灰色。

澳门微尼斯人手机版 7

可以在CodePen以这种方式使用任何支持的PostCSS插件:

  • 通过@规则引入你想要的使用的PostCSS插件
  • 根据插件的指令在CSS面板中使用(在上面你能找到对应插件使用说明的链接地址)

下面就是我们前面在CodePen中使用PostCSS得到的最终效果:

链接地址

– Mac OS X 中的常用字体

一个典型安装的 Mac OS X 10.4
会包含以下常用西文字体(某些非常用字体就不列出了):

sans-serif serif monospace
Helvetica Times Courier
Arial Times New Roman Courier New
Arial Narrow Georgia
Arial Black
Comic Sans MS
Gill Sans
Impact
Trebuchet MS
Verdana
Lucida Grande

发表评论

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

相关文章