是为每个CSS样式导入预先编写的规则，还是编写自己的规则（OOCSS）？ [英] Is it better to import a pre-written rule for each CSS style or to write your own rule (OOCSS)?
问题描述
我正在阅读 Nicole Sullivan 的面向对象的CSS 。简而言之，基本思想是，每次我们对网站进行风格设计，而不是从头开始，最好使用一些已经编写的基本构建块作为类，然后扩展以满足我们的需求。 （扩展包括向HTML添加更多特定/重写的类，因为CSS类不可能从彼此继承规则...希望在CSS4？）OOCSS原则的灵感来自这样的事实，你不需要每次重写 Java Math类你需要找到一个双数的正弦。代码已经写了（由某人），为什么不使用它？
虽然我认为这是一个伟大的提案的抽象形式，它从适用的角度。 [下面阅读我的具体问题，但我一直在寻找阅读材料，所以请随时停止一分钟，并评论一些更多的链接到OOCSS资源，例如。
这是我的样式表：
.heading {...} / *所有标题样式* /
.alpha {...} / * h1的特定更改* /
.beta {...} / * h2的具体更改* /
.gamma {...} / * h3的具体更改* /
.delta {...} / * h4的具体更改* /
.epsilon {...} / * h5的具体更改* /
.zeta {...} / * h6的具体更改* /
现在第一个选择器适用于任何标题，具有常见的属性，例如 font-family ，字母间距等。然后每个子类（不是真正的子类）有具体的区别，如 color ， font-style ， font-weight 等。事实上，这些子类在 <$在样式表中的c $ c> .heading 表示如果它们中的任何一个包含具有不相等值的相等属性，则 .heading 中的属性将是在子类中被覆盖。要获取我的标题1，我会写：
< h1 class =heading alpha> Contact Me< / h1> ;
事实上，我可以样式任何元素，例如 span ， class =heading alpha，但这确实是一个 h1 p>
[当然，我想能够说
.heading {...}
.alpha {
extends：.heading;
...
}
============================
< h1 class =alpha>联系人< / h1>
但是我们现在还不到。] 我的问题是，如果标题alpha 通常左对齐，我该怎么做使这个实例居中？ Nicole会说我应该导入她的样式表，并使用她的 .txtC {text-align：center;} 规则，因此我的代码将成为：
< h1 class =heading alpha txtC>与我联系< / h1>
但是我认为有一点点基本上是一个一对一的CSS规则和类。如果我使用这种方法，那么我不需要写任何我自己的样式表，而只是添加一些小类（legos）到我的HTML代码，使其庞大和不可读。想象一下：
< p class =ital size-medium sans-ser txtJ med-height dark-blue>这是一个
大小12pt，斜体，Arial，左右对齐，1.2em行高，暗
蓝色段落。< / p>
编写一个类 specialParagraph （或段落特殊或任何），然后分配所有这些规则在CSS？不需要legos？在我的情况下，我不能只添加 .alpha {text-align：center;} 到我的联系页面的顶部？或者甚至可以内联？
OOCSS方式的重点不是主要借用CSS片段从其他图书馆，只有当你做一些没有人做过的事情时才写新的规则。显然，这是不可能的，可能不会比滚动你自己的更好。
OOCSS的要点是尽可能抽象你的风格。它们越具体，它们的可重用性越低，当你这样做时，你最终会写更多的CSS。
在编程方面，一个汽车类，然后一个卡车类，共享各种常见的方法，你做一个车类，然后汽车和卡车从那延伸。
CSS是使用类作为mixins。例如，如果你使用了大量的< ul> 元素，并且你发现你经常将margin和padding设置为0，并且列表样式为none，你应该写一个 .reset 类，并将它应用到< ul>
另一点是，你需要从视觉的角度思考你的抽象，例如： ，如果您发现您网站的大部分内容都位于带有边框的框中，您可以创建一个基本类：
.bordered-box {
border-style：solid;
border-width：1px;
margin-bottom：20px;
padding：20px;
}
然后你可以创建其他类来混合未定义的样式 您将使用它来构建一个网站，而不是仅仅将它作为一个属性列表，您可以添加到元素，使它们看起来一定的方式。
就像这样的HTML： class =ital size-medium sans-ser txtJ med-height dark-blue，区分创建CSS类可视对象和简单定义CSS属性的CSS类。后者是可笑的。如果你打算这样做，你可能只是使用内联样式。
I was reading up a bit on Nicole Sullivan's theory on Object-Oriented CSS. In a nutshell, the basic idea is that instead of starting from scratch each time we style a website, it's probably better to use some already-written basic building blocks as classes and then extend them to fit our needs. ("Extending" encompasses adding more specific/overriding classes to HTML, due to the impossibility of CSS classes inheriting rules from each other... hopefully in CSS4? :) The OOCSS principle is inspired by the fact that you don't need to re-write the Java Math class every time you need to find the sine of a double number. The code has already been written (by someone), so why not use it?
While I think that's a great proposal in the abstract form, I'm having trouble grasping it from an applicable point of view. [Read below for my specific question, but I'm always looking for reading material so feel free to stop for a minute and comment with some more links to OOCSS resources, e.g. benefits and criticisms of, etc.]
Here's my stylesheet:
.heading {...} /* for all heading styles */
.alpha {...} /* specific changes for h1 */
.beta {...} /* specific changes for h2 */
.gamma {...} /* specific changes for h3 */
.delta {...} /* specific changes for h4 */
.epsilon {...} /* specific changes for h5 */
.zeta {...} /* specific changes for h6 */
Now the first selector is for any heading, with common properties such as font-family, letter-spacing, etc. And then each "subclass" (not really a subclass) has specific differences such as color, font-style, font-weight, etc. The fact that these "subclasses" are written after .heading in the stylesheet indicates that if any of them contain equal properties with unequal values, then the property in .heading will be overridden by that in the "subclass". To get my Heading 1, I would write:
<h1 class="heading alpha">Contact Me</h1>
In fact, I could style any element, such as span, with class="heading alpha", but indeed this is truly an h1 element.
[Of course, I'd like to be able to say
.heading {...}
.alpha {
extends: .heading;
...
}
==============================
<h1 class="alpha">Contact</h1>
but we aren't quite at that point yet.]
My question is, if heading alphas are normally left-aligned, what would I do to make this instance centered? Nicole would say that I should import her stylesheet and use her .txtC {text-align:center;} rule, so my code would become:
<h1 class="heading alpha txtC">Contact Me</h1>
But I think it's a little much to have basically a one-to-one correspondance with CSS rules and classes. If I used this method, then I wouldn't need to write any of my own stylesheets, but instead just add a bunch of small classes ("legos") to my HTML code, making it bulky and unreadable. Imagine having:
<p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a
size 12pt, italic, Arial, left-right justified, 1.2em line height, dark
blue paragraph.</p>
Wouldn't it make more sense to write one class specialParagraph (or paragraph-special or whatever) and then assign all those rules in the CSS? No need for legos? In my case, couldn't I just add .alpha {text-align: center;} to the top of my Contact page? Or maybe even in-line?
The point of the OOCSS way isn't to primarily borrow CSS snippets from other libraries and only write new rules when you're doing something no one has done before. Obviously that would be impossible and probably not any better than rolling your own.
The point of OOCSS is to abstract your styles as much as possible. The more specific they are, the less reusable they are, and when you do that you end up writing much more CSS.
To put that in programming terms, instead of making a car class and then a truck class that share all sorts of common methods, you make a vehicle class and then car and truck extend from that.
The equivalent of that in CSS is to use classes as mixins. For example, if you're using a lot of <ul> elements and you find that you're constantly setting margin and padding to 0 and list style to none, you should probably write a .reset class that does that for you and apply the class to your <ul> instead of writing the same three rules over and over again for all your navigation and list items.
Another point is that you need to think about your abstractions from a visual standpoint, for example, if you find that most of the sections of your site live in boxes with borders around them, you could create a basic class like:
.bordered-box {
border-style:solid;
border-width:1px;
margin-bottom:20px;
padding:20px;
}
Then you'd create other classes to mix in styles that aren't defined on .bordered-box such as color, and width, etc.
Think of your css classes as a toolbox that you're going to use to build a site instead of thinking of it merely as a list of properties you can add to elements to make them look a certain way.
To your point about HTML like this: class="ital size-medium sans-ser txtJ med-height dark-blue", it's important to distinguish between creating CSS classes that define visual objects and CSS classes that simply define CSS properties. The latter is ridiculous. If you're going to do that you may as well just use inline styles.
这篇关于是为每个CSS样式导入预先编写的规则，还是编写自己的规则（OOCSS）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
