前端大神与码农的区别:你在小瞧css,然而我却早已摸透CSS

更新时间:2018-08-07 09:19:00点击次数:1030次

css。这是一个网页设计师的围栏。有这么多颜色、类型设置、布局选项和响应性可能性,将样式表转换成一百万个行噩梦很容易。但是,只要有几个简单的操作,你就可以清理混乱,这样css就能与你一起工作,而不是针对你。前端开发人员赋予了一些智慧给我,但我仍然无法摆脱。现在我与你分享这一切!


前端大神的自我修养:你在小瞧css,然而我却早已摸透CSS

你的css可能会一团糟,因为…

这只是自然而已。纠缠发生了。

级联。这是一种祝福和诅咒。通常情况下,当您更改一个元素的样式时,其他元素无意中会得到restyled。误用!重要使级联出现一个急刹车,并将您的不一致从一个元素样式到下一个。随着网站变得越来越大,或者越来越多的开发者开始在代码库上工作,css也会增长。没有计划,它就变成了狂野西部(野西.史密斯不会把你弄出这件事的。

您的css与html结构紧密耦合。

另一个常见错误是按照页面上元素显示的顺序编写css。当您在一个页面与其样式交叉引用时,这可能会有意义,但是一旦您考虑多个页面使用相同的css,它就会崩溃。如果有多个样式表,每页1样式表,您处于相同的困境。同样的情况下,过于特定的css选择器也倾向于镜像html。这会导致重复和膨胀…导致了糟糕的表现。这些都不是可伸缩的或者可维护的。

您没有使用模块化css

如果你编写css的方法是仔细地为每个元素设计样式,那么你就会错过树的森林。想象一下,在森林里凝视着,注意到所有枫树。您可以编写一个类来样式化所有的枫树,而不是为每个树编写重复样式。这就是您如何将您的设计抽象成可重用块的方式。

现在,想象一下构建一个登陆页面而无需编写单一的css。当您的css全部封装成可重用的块时,您就会得到一个完整的预样式片段的宝库。但这只是其中的一种福利。朱莉强调了使用模块化css的所有乐趣:

  • 模块化-你可以从没有写任何一条css的情况下就能到达构建页面的重点。

  • 可预测-不管你把组件放在哪里,它都会表现得一样,看起来也一样。编写代码很容易。您有一个命名它的系统。写起来更直观。

  • 可维护性-这是快速和容易处理的。它不会破坏网站上的其他东西。

  • 可伸缩-很难打破并且容易地建立起来。

  • 干燥-它消除了在css中复制和粘贴复制的需求。

  • 有组织-这里有个地方可以供你选择。


前端大神的自我修养:你在小瞧css,然而我却早已摸透CSS

什么是模块化CSS?

有几个模块化解决方案,但是朱莉主要集中在一个叫做OOCSS(面向对象css)。它是一个可伸缩、可维护、语义和可预测的编写css的方法。妮可·沙利文在为facebook工作时创建了它。她开始改进一款笨拙的10000行样式表。她开始看到造型中的图案,从而导致她创建了一个可重用模块,称为“媒体”对象。通过这样做,她证明了她可以节省数百行代码。媒体对象是包含固定大小媒体元素(图像或视频)以及其他可变大小内容(文本)的内容块。考虑到这是facebook上最主要的内容形式,性能和可维护性的改善是巨大的!

OOCSS-原则

中的的两大原则是:从皮肤结构分离到容器分离,从内容分离。

皮肤结构分离意味着将重复模式定义为可重用结构。例如,什么使按钮看起来像按钮?你可能会说:“圆角、填充和边框。”然后你可能会重复视觉模式,它充当重复的皮肤。例如,您可能会有一些蓝色按钮和红色按钮。这些是两个单独的皮肤,因为它们每个都有不同的背景颜色。

容器与内容分离意味着无论您放在哪里,对象都应该看起来相同。换句话说,避免依赖位置的样式。例如,如果你正在设计像这样的h2…

.categoryList h2 { styles }.footer h2 { copied styles }

.你正在重复css的方式,这很难缩放。

这里有一个更好的方法来样式化标题。您可以重用此样式,即页眉放置位置的irregardless:

.sectionHeader { reusable styles }

OOCSS-物体

中的的基础是对象,它是您设计的一部分,可以在您的站点上重用。对象包含html、css、类似背景图像的组件以及javascript(任何行为、侦听器或方法与对象关联)。对象可以包含在模块中,该模块可能包含具有变化的基组件。例如,基本按钮可以拥有.btn类,也提供这些变体:.btn-primary.btn-inverse.btn-warning等等。下面是它在上下文中的外观。模块组件按层结构:

  • 对象或模块或组件

    .media
  • 修饰符(css设计变体)

    .media--inline, .media__img--right
  • 国家(css或js设计调整)

    .media--collapsed, .media.is-active
  • 儿童对象(关系)

    .media__img .media__body

OOCSS-最佳做法

当您正在考虑哪些对象构建时,朱莉指出了这些最佳实践。

  1. 对象应该有一个单一的责任;他们应该做一件事情好,一件事。

  2. 它们应该完全封装起来;对象应该能够站在自己的位置上,并且到处都是一样的。

  3. 为对象、修饰符和状态使用类。这允许您灵活地混合和匹配这些,而不可能存在过于具体的风险。

  4. 选择一个命名系统并保持一致。有不同的命名格式,所以形成一个团队作为计划。比如,CamelCase还是没有CamelCase?你如何辨认孩子、州、修饰词…大边界元方法(.block__element--modifier)?

  5. 决定使用语义和/或表示命名。这是一个热门话题,但是要向你的团队提供帮助是值得的。

语义参数

  • 课堂是否有实际的语义价值?

  • 对谁来说,类语义是什么?

  • 课堂应该是语义而不是表象吗?

  • 是否更好地拥有一个语义类或多个混合类?

  • 例子:.section-heading.item-content

表象论证

  • 类对浏览器没有意义。它只是用作匹配机制。

  • 类对于开发人员来说是语义上的。

  • 表示类是可重用的,并且不与内容相关联。

  • 内容描述自己;类不需要。

  • 例子:.padding-top-large.no-margin

你想要什么?

  • 干燥html(语义)或干燥的css(表示)

  • 您是否有任何约束,比如无法访问css?你是否设计了一个第三派对工具被吐出来的html?

  • 你可以混合使用。使用语义模块类和表示实用程序类可能对您的团队最有效。


前端大神的自我修养:你在小瞧css,然而我却早已摸透CSS

怎样才能开始使用模块化css?

不知道从哪里开始?以下是朱莉关于下一步做什么的秘诀。这是一个伟大的讨论点,以培养您的团队,因为您将想要制定一个计划,为您的情况最好的工作。然后从那里采取小步骤开始收获模块化系统的好处。

  1. 使用css预处理程序,例如Sass。使用分页、嵌套和子元素。这些有助于使重复变得更好。

  2. 建立公约。选择命名系统、分类系统、定义代码格式化标准并记录所有内容。

  3. 开始迭代抽象您的站点。从基础样式开始-html, body, p, a, h1-h6等然后构建块对象-lists, nav, buttons, media。之后,对复合对象进行工作-headers, footers, masonry cards, sidebars.

  4. 不断地隔离代码直到找到一个舒适的粒度级别。

  5. 停止使用css选择器用于非css(例如javascript、特征规范等等)。

  6. 建筑师是个styleguide。在应用程序中构建它之前,在样式向导中构建组件(帮助确保封装)。如果一个班级要打破其他地方的东西,那么测试也是个不错的测试平台。

  7. “组织,优化,重复直到你感到没有痛苦”-朱莉卡梅隆

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息