摘要：自从年提出以来。它就成为一个领先的模块系统，用来组织你的代码方式之一。换句话说，你的样式中尽量不要使用标签或者标识符。我们必须使用来创建对象，通过在类中调用，将其合在一起。如果你不在刻意在中追求语义化，你仍然可以使用。
自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统，用来组织你的CSS代码方式之一。
OOCSS不同于其他组织CSS代码方法，比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上，我也通常将SMACSS与OOCSS混为一谈。其实John W. Long在The Sass Way上面写了很多篇有关于CSS模块化的教程。
OOCSS、SMACC和BEM在CSS中是很有内涵的东东，早就在W3cplus站点上有相关内容科普过。可以说理解了这些内容将能更好的帮助您组织、管理您的CSS代码或者说CSS模块。
今天，我要和大家一起探讨的是OOCSS的一些基本原则。主要跟大家一起探讨的是如何将Sass和OOCSS更好结合在一起的一些建议。
什么是对象？在视觉是这是一个重复的模块，可以将HTML、CSS和JavaSctrip独立抽取出来，成为一个独立的片段——Nicole Sullivan
将一个CSS对象抽取出来要考虑的第一件事情就是怎么将样式与结构分离出来，组织代码的最佳方式是什么？OOCSS的创始人Nicole Sllivan提了两个主要原则：
结构与样式分离：你应该在对象中定义结构和位置，而对于样式特性应该使用类名分离出来，比如说background或border。这样一来你就不需要去覆盖一些特征性样式。
容器与内容分离：不要在你的HTML结构中插入样式。换句话说，你的样式中尽量不要使用html标签或者id标识符。相反，应该定义一些类名来定义样式，而且选择器的嵌套的层级应该尽量的少。
我们快速做一个示例运用这些原则可能比较困难（理解理论的东西总是蛋疼的）。让我们来看一个简单的实例，看看是如何组织这样的代码:
/* 不好的方式 */
.box-1 {
border: 1px solid #ccc;
width: 200px;
height: 200px;
border-radius: 10px;
}
.box-2 {
border: 1px solid #ccc;
width: 120px;
height: 120px
border-radius: 10px;
}
你不难发现，有一些重复的样式出现。在这个例子中，border样式在两个类中都定义了。如果你想改变border-radius或border属性值时，不得不在两个地方修改。
为了解决这个问题，把这个样式放在另一个新增加的类名中：
/* 好的方式 */
.box-1 {
width: 200px;
height: 200px;
}
.box-2 {
width: 120px;
height: 120px;
}
.box-border{
border: 1px solid #CCC;
border-radius: 10px;
}
在HTML结构中，我们可以这样使用：
语义化和维护Lorem ipsumLorem ipsum
你在意没有语义化，而我更关心的是代码的维护。比如说这个示例所示。
纯CSS来定义对象就没有语义化，但这样就存在一些问题:
每次改为样式风格时，都需要修改HTML
没有一种安全的方式来访问DOM元素
对于OOCSS来说，除了维护HTML比较困难之外，其他都是很完美的。我们的CSS很容易扩展，也非常方便用于新的内容中。
因此我们写了部分CSS代码用于在HTML结构中进行扩展。这样的方式真的会变得更好？
Sass的到来我可以肯定你肯定听过Sass的@extend命令和了解他是如何工作的。因此，要非常感谢选择器的占位符%placeholder，在Sass中可以通过@extend来扩展，如此一来在CSS就是可以创建一些有语义化的类名，也解决了HTML中的存在的问题。
我们必须使用%placeholder来创建对象，通过@extend在类中调用，将其合在一起。这样就可以自己组织代码：
/* 不好的方式 */
a.twitter {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #55acee
color: #fff;
}
span.facebook {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #3b5998;
color: #fff;
}
所有的对象都使用@extend和基本对象混合在一起，这样就可以得到一个干净的CSS对象，在Sass中是十分容易的事情，我们也不必要再花时间来修改HTML。
/* 好的方式 */
%button {
min-width: 100px;
padding: 1em;
border-radius: 1em;
}
%twitter-background {
color: #fff;
background: #55acee;
}
%facebook-background {
color: #fff;
background: #3b5998;
}
.btn {
&--twitter {
@extend %button;
@extend %twitter-background;
}
&--facebook {
@extend %button;
@extend %facebook-background;
}
}
具有语义化了，完美？Sass解决了我们的总是。记住：@extend让你的HTML保持最干净，而且又具有语义化，这在Sass中是件十分容易的事情。
我喜欢把其称为OOSass，因为他是OOCSS和Sass的混合物。当然，你不必使用它。如果你不在刻意在HTML中追求语义化，你仍然可以使用OOCSS。每个人都有自己的方式，那么你又是如何构建你自己的CSS呢？请与我们一起分享。
英文原文
via cn-sass.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110983.html
摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...
摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...
摘要：为什么说最佳实践是呢简单来说，就是这类预处理器在提供一定的抽象能力的同时，也不会破坏自身的特性。就语义化这件事情而言，如果你的是基于标准来编写的，意味着你的页面具备更多的可能性。 原文：https://github.com/kuitos/kuitos.github.io/issues/33 15年年末写了篇关于BEM方法论(实践上内容并不是原BEM)的文章，文末给自己挖了个坑说要聊聊w...
摘要：，字面意思是面向对象的，是由提出的理论，其主要的两个原则是分离结构和主题分离容器和内容用一个例子来说明。分离容器和内容要求使页面元素不依赖于其所处位置。命名规则不需要严格遵守，可以根据实际情况和自身喜好做其他的约定。 最近在The Sass Way[]一文，发现文章在开头部分就提到了OOCSS、 SMACSS、 BEM、这3个词。如果还不知道这些是什么，请先不要继续看下去，联想到作者这...
阅读 2113·2023-04-26 03:06
阅读 3522·2023-04-26 01:51
阅读 2049·2021-11-24 09:38
阅读 2422·2021-11-17 17:00
阅读 2282·2021-09-28 09:36
阅读 919·2021-09-24 09:47
阅读 2564·2019-08-30 15:54
阅读 1530·2019-08-30 15:44
