CSS干燥编程方法的详细解决方案

本文主要介绍了CSS干编程的方法，这是编写CSS OOCSS以外的另一种流行的规则。
干的是不重复自己，不重复。但事实上，这个名字是有点无聊，这理论是不是消除重复，但如何消除它的意义。总的来说，我认为drycss和OOCSS是两个极端，所以我会谈谈对比的方式drycss含量。使用drycss很容易，三步。

1。包可重复使用的属性

drycss有点像OOCSS。第一步是集团式消除重复，但是正如我说的，关键是how.oocss以组为对象的风格，所以分组的逻辑是什么元素是应该的，而drycss重点重复。不管逻辑是什么，它应该只有一个。粒度是值得考虑的问题。如果太小，就会变成一排式的，毫无意义的局面。如果它太厚，它将成为一个没有重用的巨大怪物。我认为它可以分成一组相关的样式，B在A缺少时不能工作，你也可以把一些惯用的短语分成一组：

CSS代码将内容复制到剪贴板。
{
浮点数：左；
位置：绝对；
显示：内联块；
溢出：隐藏；
}

这是一组样式，可以用来触发块格式化上下文（块级格式化上下文），以便完成一组样式。然后编写2套大小的样式。

CSS代码将内容复制到剪贴板。
{
宽度：960px；
高度：自动；
}
{
宽度：720px；
身高：600px；
}
{
宽度：220px；
身高：600px；
}

这是用于布局的三组样式，页面分为两部分。

2。命名按逻辑分组。

然后，我们将它命名为添加ID选择器，但是我们并没有真正使用它，但是我们使用它来标记组样式。

CSS代码将内容复制到剪贴板。
# block_formatting_contexts
{
浮点数：左；
位置：绝对；
显示：内联块；
溢出：隐藏；
}

# layout_full
{
宽度：960px；
高度：自动；
}

# layout_content
{
宽度：720px；
身高：600px；
}

# layout_sidebar
{
宽度：220px；
身高：600px；
}

这一步类似OOCSS类，确定每一组的逻辑或使用。然而，drycss有更关键的一步，这也是从OOCSS的本质区别。

三.为每个组添加选择器

drycss非常不同于OOCSS使用时。它在HTML文件中编写HTML选择器，在分组后使用这些样式，而不是直接在HTML文件中使用CSS文件编写的类。
CSS代码将内容复制到剪贴板。
。头，
容器，
内容错误，
内容左侧，
# block_formatting_contexts
{
浮点数：左；
位置：绝对；
显示：内联块；
溢出：隐藏；
}

。头，
。导航仪，
容器，
# layout_full
{
宽度：960px；
高度：自动；
}
内容错误，
部分，
# layout_content
{
宽度：720px；
身高：600px；
}

内容错误，
侧边栏，
。简介，
# layout_sidebar
{
宽度：220px；
身高：600px；
}

可以看出，使用drycss时，班级写在HTML将极具表现力，和什么元素本身是用来做什么的，它将被命名为它的类的意义后，基本上是对应类的一个元素，HTML会变得简单和清晰。此外，drycss也是反对OOCSS相对思维，这是最有趣的地方。在发展中，你不应该思考如何应对未来的假像OOCSS HTML，但想想CSS本身。

一般来说，OOCSS适合开发CSS框架或UI模板。这是一个UI开发方式从外到内，而drycss适用于混沌保存HTML，或增强的HTML结构和表意功能。这是一种从内部到外部的UI开发方式，这里的内部区域是HTML结构，而外手指是CSS样式。