扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >开始编写CSS(1)

开始编写CSS(1)

希尔瓦娜斯发布于 2017-11-14 09:57查看:8167回复:1

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

     CSS预处理器

image.png

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

      连接(Concatenation)

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

      扩展(Extending)

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

image.png

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

image.png

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

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

image.png

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

      配置(Configuration)

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

image.png

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

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

image.png

        针对预处理器(Against the preprocessors)

  • 预处理器是一种工具,您要使用得先要有一个适合的环境。如果你思念将其集成到你的应用程序中,也需要额外的编码。

  • 如果你不想让你的代码变得混乱,你需要有一个观察机制,用来监测你的文件。如果这样,你每个项目开始时就需要运行这个监测机制。

  • 通常开发人员只看到.less或.sass文件,但是输出是什么非常重要。你可能有写得很好的Sass代码,但这并不意味着,你最终会有很好的CSS代码。可能会有一些特异性的问题,所以需要定期检测编译的版本。

        

    BEM

image.png

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

image.png

        可能会写出对应的样式:

image.png

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

image.png

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

image.png

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

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

image.png

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


        OOCSS

image.png

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

      单独的结构和样式

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

image.png

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

image.png

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

image.png

        这样做有几个好处:

  • 有一个类,它可以使用多次

  • 如果需要修改,只需要修改一个地方

  • 在CSS样式中删除重复的代码,使其文件变得更低


        独立的容器和内容

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

image.png

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

      框架

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

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

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: