OOCSS编程CSS

本文主要介绍了CSS，OOCSS编程就是这样，CSS的面向对象编程，需要的朋友可以参考一下。
OOCSS是面向对象的CSS，这个对象指的是页面中的对象，不一样的与传统的面向对象的编程，如没有方法对于这类事情，说一些额外的类可以看作是继承或类似的界面差来实现目标。例如，在电子商务网站上的商品是一个典型的对象。他们有许多相似之处和许多不同之处。基本的布局是很广泛的范围、按钮、图片、文字等，与边缘线框、背景颜色和字体大小，都是有区别的。因此，按照OOCSS指南，我们应该写一个产品类，然后添加一些类如边界，主题就是区分它：

CSS代码将内容复制到剪贴板。
{。产品
显示块；
溢出：隐藏；
浮点数：左；
宽度：200px；
高度：自动；
}
产品头{ }
产品主体{ }
产品英尺{…}

{产品主题黑色
背景：黑色；
颜色：白色；
}

{产品边界
边境：1px solid # 333；
}

这样，在上述两个附加类函数下，我们可以在HTML中获得4种不同的产品样式。另外随着等级的提高，产品的风格也将成倍增加。这只是一个简单的例子，意在指出OOCSS的想法，但它并不突出它的意义。别担心。在第一两原则看OOCSS。

1。分离容器和内容

所谓容器是包装对象的元素，如div，我们通常称之为包装、容器、主体等，那么分离容器和内容是什么呢很简单，一句话，内容是可用的，也就是说，不应该有这样的情况。

CSS代码将内容复制到剪贴板。
container.product {。
…
}

这样的结果是：可重用性是因为它只能用在这个容器大大减少。但这并不意味着我们应该要求所有落入风格在一个单独的类，差异应分开放置在一个班，这是OOCSS的本质。

例如，当我们不想牺牲太多的时间和表现，展示的瀑布流，最前面会使用列，类似于设计车道。你想说不，这是一个假Pinterest，但谁在乎呢，用户将没有时间去识别它拖浏览器的宽度，在伊江当货物至少不卡。哈哈，不认真，一分为几列，然后根据高度和填充里面的商品，先看看下面的代码，我省略了一些风格，避免误导：

CSS代码将内容复制到剪贴板。
{。柱
高度：自动；
宽度：200px；
}

{。产品
宽度：180px；
右边距：20px；
边距：10px；
}

看起来不错。每一列是200px宽，而且货物放在里面。水平间距很大，垂直间距也有点小，但是等一下，我们总是需要一张整洁的商品清单，也许保证金不是产品的必要属性，至少应该是可变的，我们把它拉出来。

CSS代码将内容复制到剪贴板。
{。产品
宽度：180px；
}

{垂直产品
身高：400px；
右边距：10px；
边距：10px；
}

{水平产品
高度：自动；
右边距：20px；
边距：10px；
}

这样，从产品中分离列或列表是不相关的。即使将来有其他的组织形式，只要产品的基本结构不能改变，就可以直接重用。这无非是新xxx-product.another优势类添加一些辅助方式，设计逻辑放在HTML和CSS，功能更强大。

什么是风格逻辑瀑布流中的商品不高，它们在名单中很高。这是一种风格的逻辑。如果是写父子选择器在CSS的形式，它会丧失自由。它非常自由、灵活的HTML中通过选择子类添加显示不同形式的产品。另外值得一提的是，利润率底是一样的，但是我们应该把自己的类的原因很简单，他们不小心一样，在逻辑设计没有底一样，这里就不再重复了，但看起来像。如果你需要在未来的一个底部的变化，共享是非常尴尬的。

2。皮肤与结构的分离

第二个是容易理解的，皮肤（主题）是视觉效果，即使去掉了页面也不是什么效果，是皮肤；而结构指的是抽象结构不像HTML，因为CSS仍然是风格，所以结构是相对的页面结构。

首先看看我们的产品吧，添加一些背景色和边框：

CSS代码将内容复制到剪贴板。
{。产品
宽度：200px；
背景：# f6f2f2；
边境：1px solid # c4a0a0；
}

它看起来不错，但设计师们傲慢，一丝不苟的色彩，完美的搭配，绝对不会让你只使用其中的一个模块，侧边栏页面，甚至页眉可能使用相同的背景色和边框，它们甚至可以相互嵌套。毕竟，没有一个设计师能活在3个或4个以上的颜色中，所以我们能做的不是在每一个类中添加这样的模式，而是把它作为一个独立的类来呈现，因为颜色是混乱的源头，我把它放在第一位。

CSS代码将内容复制到剪贴板。
{主BG
背景：# f6f2f2；
}

{主边框
边境：1px solid # c4a0a0；
}

这允许你在页面中的任何时间使用的主要设计元素，它是非常简单的修改，而不用担心错过任何地方。我将背景分为两类，或逻辑的设计应放在HTML中，背景和边界不一定发生在同一时间，两者之间的关系应该由HTML决定，即使设计逻辑决定的约束力，但也可能是由于放在HTML结构中的两个不同的元素。

OOCSS强调阶级，每个组的风格写作成类的HTML，和许多类的组合可以组成一个对象。所以如果你想写一套UI风格发展一劳永逸，我建议使用OOCSS发展。但它也有缺点。HTML中放置了太多的设计逻辑，极大地简化了页面开发的选择。如果编写HTML的开发人员不完全理解整个CSS的结构，那么很容易导致HTML中的类混乱。