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

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

开始编写CSS(2)

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

        SMACSS

image.png

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

  • 基本(base):用于一个简单的选择器的基本样式,如clearfix

  • d布局(Layout):定义网格

  • 模块(Module):一群元素相结合在一起形成的一个模块,比如说header和sidebar

  • 状态(State):元素的不同状态。如隐藏、按住,扩大等规则定义给对象

  • 主题(Them):更多的样式

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


        Atomic Design

image.png

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

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

image.png

        或者

image.png

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

image.png

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

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

image.png

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

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


    OrganicCSS

image.png

      原子(Atoms)

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

        分子(Molecules)

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

image.png

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

      细胞器(Organelles)

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

image.png

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

      更抽象(More abstractions)

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

image.png

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

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

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

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

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: