oocss_面向对象CSS（OOCSS）的基础

最新推荐文章于 2022-12-07 14:08:22 发布

cune1359

最新推荐文章于 2022-12-07 14:08:22 发布

阅读量940

点赞数 1

文章标签： python css java javascript 编程语言 ViewUI

前端开发Swift发展，并且每年都添加许多新技术。对于开发人员来说，跟上所有事情可能是一场斗争。在Sass和PostCSS之间，很容易迷失在开发工具的海洋中。

一种较新的技术是面向对象CSS，也简称为OOCSS。这不是一个工具，而是一种CSS编写方法，旨在使CSS模块化和基于对象 。

在本文中，我想介绍OOCSS的核心基础知识 ，以及如何将这些思想应用于前端Web工作 。这项技术可能不会赶上每个开发人员，但值得了解新概念来决定您的工作流程是否可以从中受益。

是什么使CSS面向对象？

在过去的几年中，OOP已在JavaScript和后端语言中得到广泛使用，但是根据CSS的原理组织CSS仍然是一个新概念。

OOCSS中的“对象”是指HTML元素或与其关联的任何内容（例如CSS类或JavaScript方法）。例如，您可能有一个侧边栏窗口小部件对象，可以将其复制以用于不同的目的（时事通讯注册，广告块，最新帖子等）。 CSS可以将这些对象作为对象 ，从而使缩放变得轻而易举。

总结OOCSS的GitHub条目，一个CSS对象可能包含四件事：

DOMHTML节点
有关这些节点样式CSS声明
像背景图像这样的组件
与对象关联JavaScript行为，侦听器或方法

一般来说，当CSS考虑可重用且可定位到多个页面元素的 类时，它是面向对象的。

许多开发人员会说OOCSS更容易与他人共享，并且在几个月（或数年）的不活跃开发之后也更容易使用。与此相比，SMASMA等其他模块化方法则具有更严格CSS对象分类规则。

如果您想了解更多信息，那么OOCSS FAQ页面上有很多信息。创作者Nicole Sullivan经常谈论OOCSS及其与现代Web开发的联系。

结构与风格分开

OOCSS的很大一部分是编写将页面结构（宽度，高度，边距，填充）与外观（字体，颜色，动画）分开的代码。这允许将自定义外观应用于多个页面元素， 而不会影响结构 。

这对于设计可轻松在布局中移动的组件也很有用。例如，边栏中的“最新帖子”小部件应可移动到页脚中或内容上方，同时保持相似的样式。

这是“最近的帖子”小部件的OOCSS示例，在这种情况下，这是我们CSS对象：

/* Structure */
.side-widget {
  width: 100%;
  padding: 10px 5px;
}

/* Skinning */
.recent-posts {
  font-family: Helvetica, Arial, sans-serif;
  color: #2b2b2b;
  font-size:1.45em;
}

注意，布局由.side-widget类管理，该类也可以应用于多个侧边栏元素，而外观由.recent-posts类管理，该类也可以用于对其他小部件进行外观设置。例如，如果将.recent-posts小部件移动到页脚，则它可能不会采用相同的位置，但是可能具有相同的外观。

还要看一下CodePen的侧边栏示例。它对浮点数和文本对齐使用不同的类分隔，因此复制将不需要额外CSS代码 。

将容器与内容分开

简单来说，这仅意味着您应避免使用子选择器。当自定义任何唯一页面元素（如锚链接，标题，blockquotes或无序列表）时，应为它们提供唯一的类，而不是后代选择器。

这是一个简单的例子：

/* OOCSS */
.sidebar { /* sidebar contents */ }
h2.sidebar-title { /* special h2 element styles */ }

/* Non-OOCSS */
.sidebar { /* same sidebar contents */ }
.sidebar h2 { /* adds more specificity than needed */ }

尽管使用第二种代码格式并不可怕，但是如果您要编写简洁的OOCSS，强烈建议您遵循第一种格式。