CSS进阶指引

当前位置 : 首页 > 网页制作 > CSS > CSS进阶指引

CSS进阶指引

来源: 作者: 时间:2015-10-30 09:30
这篇文章主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下
这篇文章主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下

你不要觉得CSS没什么重要可言?最近几年他成为一个热门的话题,很多人都在讨论他。CSS并不是一个简单的事情,前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些,我们更关心的是网站的性能以及如何制作出更好的网站。在本文中,我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个程序员,我真正感兴趣的事情是框架(Architectural)部分。我觉得写CSS应该需要去改变,为此我深挖了很多知识。我搜索了好的程序、工作流和原则。这篇文章将带领大家和CSS一起旅行,很多人都说写CSS并不是编程,我就不同意,我说写CSS同样是有趣的,富有挑战性的。
CSS预处理器
让我们一起面对吧,在世界上写CSS并不是一件可笑的事情。CSS预处理器看起来就像CSS,但他更像一个魔术师一样,使用一些魔法会产生有效的CSS代码。这让你的样多和浏览器之间新增加了一层,这样不是更加的糟糕吗?看上去是这样,但事实不是这样的,因为CSS预处理器提供了一些真正有用的特性。
  连接(Concatenation)

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

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

CSS Code复制内容到剪贴板
  1. // less   
  2. .bordered(@color#000) {   
  3.     borderdotted 2px @color;   
  4. }   
  5. .header { .bordered; }   
  6. .footer { .bordered(#BADA55); }   
  7.   
  8. // 编译出来的CSS   
  9. .header {   
  10.     borderdotted 2px #000000;   
  11. }   
  12. .footer {   
  13.     borderdotted 2px #bada55;   
  14. }  

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

CSS Code复制内容到剪贴板
  1. .bordered {   
  2.     borderdotted 2px #000;   
  3. }  

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

CSS Code复制内容到剪贴板
  1. // sass   
  2. @mixin bordered($color#000) {   
  3.     borderdotted 2px $color;   
  4. }   
  5. .header { @include bordered; }   
  6. .footer { @include bordered(#BADA55); }   
  7.   
  8. //编译的CSS   
  9. .header {   
  10.     borderdotted 2px black;    
  11. }   
  12. .footer {   
  13.     borderdotted 2px #bada55;    
  14. }  

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

CSS Code复制内容到剪贴板
  1. // sass   
  2. %bordered {   
  3.     borderdotted 2px #000;   
  4. }   
  5. .header {    
  6.     @extend %bordered;    
  7. }   
  8. .footer {    
  9.     @extend %bordered;    
  10. }   
  11.   
  12. // 编译的CSS   
  13. .header, .footer {   
  14.     borderdotted 2px #000;    
  15. }  

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

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

CSS Code复制内容到剪贴板
  1. // sass   
  2. $brand-color#009f0A;   
  3. ...   
  4. h1 {   
  5.     color: $brand-color;   
  6. }  

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

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

CSS Code复制内容到剪贴板
  1. // sass   
  2. @mixin border($side) {   
  3.     border-#{$side}: solid 1px #000;   
  4. }   
  5. .header {   
  6.     @include border("left");   
  7. }   
  8.   
  9. // 编译的CSS   
  10. .header {   
  11.     border-leftsolid 1px #000;    
  12. }  

  针对预处理器(Against the preprocessors)

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

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

XML/HTML Code复制内容到剪贴板
  1. <header class="site-header">  
  2.     <div class="logo"></div>  
  3.     <div class="navigation"></div>  
  4. </header>  

  可能会写出对应的样式:

CSS Code复制内容到剪贴板
  1. .site-header { ... }   
  2. .logo { ... }   
  3. .navigation { ... }  

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

CSS Code复制内容到剪贴板
  1. .site-header .logo { ... }  

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

CSS Code复制内容到剪贴板
  1. .site-header-logo { ... }  

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

CSS Code复制内容到剪贴板
  1. .site-header-logo-xmas { ... }  

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

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

CSS Code复制内容到剪贴板
  1. .site-header { ... } /* block */  
  2. .site-header__logo { ... } /* element */  
  3. .site-header__logo--xmas { ... } /* modifier */  
  4. .site-header__navigation { ... } /* element */  

  也就是说site-header是我们的块。那么logo和navigation是这个块的元素,圣诞版本的logo是修饰符。也许它看起来简单,但是它真的很强大。一旦你开始使用它,会发现他能让你的结构更加的优秀。当然也有反对的理由,那就是因为其语法。是的,或许看起来有点丑,但为了有一个好的结构,我会准备为此做出牺牲。(更好的阅读请点这和这)。
 OOCSS
自从我发现BEM,我就开始在思考如何正确的使用我的类名。也许,我的第一件事情要读一篇关于面向对象的CSS。面向对象编程添加了一些抽像的概念,CSS也支持这样的概念。如果你使用了CSS预处理器,你或多或少知道一些。做为一个编写代码的人,我发现这个概念离我平时编程很近,拿JavaScript为例,有两个主要原则:
  单独的结构和样式

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

CSS Code复制内容到剪贴板
  1. .header {   
  2.     background#BADA55;   
  3.     color#000;   
  4.     width960px;   
  5.     margin: 0 auto;   
  6. }   
  7. .footer {   
  8.     background#BADA55;   
  9.     text-aligncenter;   
  10.     color#000;   
  11.     padding-top20px;   
  12. }  

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

CSS Code复制内容到剪贴板
  1. .colors-skin {   
  2.     background#BADA55;   
  3.     color#000;   
  4. }   
  5. .header {   
  6.     width960px;   
  7.     margin: 0 auto;   
  8. }   
  9. .footer {   
  10.     text-aligncenter;   
  11.     padding-top20px;   
  12. }  

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

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

  这样做有几个好处:

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

  独立的容器和内容

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

CSS Code复制内容到剪贴板
  1. .header .social-widget {   
  2.     width250px;   
  3. }  

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

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

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

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

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

  我没有使用SMACSS的任何经验,便它是非常受欢迎,实际上也能促进你有更好的想法。这比一个框架的概念更强。所以,你不需要遵循任何严格的规则、类或者组件。
Atomic Design
知道了OOCSS和SMACSS后,请允许我找一个恰当的比喻,请快速登录这个页面。这里展示了一个伟大的原子设计概念。它的作者是Brad Frost,众所周知,他是一位有名的Web开发人员,致力于响应式设计和移动端开发。

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

CSS Code复制内容到剪贴板
  1. <label>Search the site</label>  

  或者

CSS Code复制内容到剪贴板
  1. <input type="text" placeholder="enter keyword" />  

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

CSS Code复制内容到剪贴板
  1. <form>   
  2.     <label>Search the site</label>   
  3.     <input type="text" placeholder="enter keyword" />   
  4.     <input type="submit" value="search" />   
  5. </form>  

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

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

CSS Code复制内容到剪贴板
  1. <header>   
  2.     <div class="logo"> </div>   
  3.     <nav>   
  4.         <ul>   
  5.             <li><a href="#">Home</a></li>   
  6.             <li><a href="#">About</a></li>   
  7.             <li><a href="#">Contacts</a></li>   
  8.         </ul>   
  9.     </nav>   
  10.     <form>   
  11.         <label>Search the site</label>   
  12.         <input type="text" placeholder="enter keyword" />   
  13.         <input type="submit" value="search" />   
  14.     </form>   
  15. </header>  

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

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


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

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

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

CSS Code复制内容到剪贴板
  1. margin-top24px;  

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

CSS Code复制内容到剪贴板
  1. body {   
  2.     margin-top24px;   
  3. }   
  4. header {   
  5.     margin-top24px;      
  6. }  

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

CSS Code复制内容到剪贴板
  1. body, header {   
  2.     margin-top24px;   
  3. }  

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

CSS Code复制内容到剪贴板
  1. %margin-top-24 {   
  2.     margin-top24px;   
  3. }   
  4. body {   
  5.     @extend %margin-top-24;    
  6. }   
  7. header {   
  8.     @extend %margin-top-24;    
  9. }  

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

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

CSS Code复制内容到剪贴板
  1. @include define-atom("block") {   
  2.     displayblock;   
  3. }   
  4. @include define-atom("font-family") {   
  5.     font-family: Georgia;   
  6. }  

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

CSS Code复制内容到剪贴板
  1. @mixin header { // <- molecule called 'header'  
  2.     @include atoms((   
  3.         block,   
  4.         clearfix,   
  5.         font-family  
  6.     ));   
  7. }  

  分子(Molecules)

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

CSS Code复制内容到剪贴板
  1. @mixin login-box {    
  2.     @include atoms((   
  3.         block,   
  4.         font-size-20,   
  5.         margin-top-23,   
  6.         bold  
  7.     ));   
  8. }  

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

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

CSS Code复制内容到剪贴板
  1. .login-form {   
  2.     @include label;   
  3.     @include input;   
  4.     @include textarea;   
  5. }  

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

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


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

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

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

Tag:
网友评论

<