快捷搜索:
来自 新京葡娱乐场网址 2019-08-25 13:21 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

发端编写制定CSS

开始编写CSS

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

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

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

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

CSS预处理器

图片 1

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

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

连接(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

扩展(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的不同状态或不同版本。
  • 修饰符使用的是,子模块使用_符号。

    图片 2

    BEM

配置(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("left");
}
 
// 编译的CSS
.header {
    border-left: solid 1px #000;
}

SUIT

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

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

    图片 3

    SUIT

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

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

针对预处理器(Against the preprocessors)

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

ACSS

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

图片 4

ACSS

扩展阅读

  • 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:

BEM

图片 5

好的,我找到了一个新的好玩工具。这个预处理器可以节省大量的时间,但他不能为你写出好的结构。首先,我开始考虑是一个命名约定,让我们来看以下的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是修饰符。也许它看起来简单,但是它真的很强大。一旦你开始使用它,会发现他能让你的结构更加的优秀。当然也有反对的理由,那就是因为其语法。是的,或许看起来有点丑,但为了有一个好的结构,我会准备为此做出牺牲。(更好的阅读请点这和这)。

扩展阅读

  • 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

OOCSS

图片 6

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

单独的结构和样式

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

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样式中删除重复的代码,使其文件变得更低

独立的容器和内容

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

JavaScript

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

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

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

框架

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

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

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:发端编写制定CSS

关键词: