blocks|key|535034|text|即使您只使用一次特定的样式，将其与其他样式保持在一起，而不将其内联起来，仍然有好处。首先，关注点的分离导致了可维护性的提高。如果你知道你要做的只是一个样式的改变，那么只有一个地方可以找到任何改变。另一个好处是自文档化，因为必须键入类名。通过为该样式命名，即使它只被使用一次，它也会使下面的语义代码更具说明性--您可以看到，这个随机的p不仅是一个段落，而且，比方说，它是intro段落。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|535035|当然，这是假设您永远不会再使用这种特定的样式。如果你愿意的话，有更多的理由将其分解到命名样式中。内联风格不是邪恶的，但它们在某种程度上是一种入门药物。|535036|entityMap^0|4M|1|54|5|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Even if you only use a particular style once there are still benefits to keeping it with your other styles and not putting it inline. First, there is the separation of concerns that leads to improved maintainability. If you know you are going in to make only a style change, there is a single place to look for any changes. Another benefit is the self-documentation from having to type out the class name. By giving that style a name, even though it is used once, it makes the semantic code below more declarative -- you can read that not only is this random <code>p</code> a paragraph, it is also, say, the <code>intro</code> paragraph.

This is, of course, assuming that you are never going to use that particular style again. If you might than there is even more reason to factor it out into a named style. Inline styles aren't evil, but they are somewhat of a gateway drug.

blocks|key|535078|text|理想情况下，您的CSS应该是“面向对象的”(至少与CSS的面向对象一样)。在定义可以在其他地方使用的属性时，您应该“继承”设置公共属性的类，并创建新的类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535079|看看OOCSS+project，它正试图支持这些原则(或者重新引入它们)。|offset|length|535080|到quote+Welbog|535081|535082|+...在我看来，"OOCSS“只是CSS，并不是随意编写的。就像您可以用OO语言编写非面向对象的设计一样，您很容易搞乱创建CSS所依据的基本理念。OOCSS似乎在说，“我们不要再搞砸了，伙计们。”|blockquote|535083|535084|entityMap|0|LINK|mutability|MUTABLE|url|http://wiki.github.com/stubbornella/oocss|1|https://stackoverflow.com/questions/627261/object-oriented-css-should-it-matter/627323#627323|2|https://stackoverflow.com/users/52443/welbog^0|0|2|D|0|0|1|5|1|7|6|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]|$D|17|E|18|1|19]]|A|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1B|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]|W|$5|P|Q|R|A|$S|X]]]]

Ideally your CSS should be "Object Oriented" (at least, as OO as CSS can be). You should "inherit" from classes that set common properties and create new classes when you define properties that could be used elsewhere.

Take a look at the <a href="http://wiki.github.com/stubbornella/oocss" rel="nofollow noreferrer">OOCSS project</a> which is trying to espouse these principles (or re-introduce them as it were).

To <a href="https://stackoverflow.com/questions/627261/object-oriented-css-should-it-matter/627323#627323">quote</a> <a href="https://stackoverflow.com/users/52443/welbog">Welbog</a>:

<blockquote>
 ... It seems to me that "OOCSS" is just CSS that isn't written haphazardly. Much the same way you can write non-object-oriented designs in OO languages, you can easily mess up the fundamental ideals upon which CSS was created. OOCSS seems to be saying, "Let's not screw up anymore, guys."
</blockquote>

blocks|key|2850905|text|将HTML和CSS分开的一个好处是，您可以在不更改任何HTML的情况下重新设置网页的外观。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2850906|史蒂夫|2850907|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

One advantage of keeping the HTML and CSS separate is that you can re-skin the webpage without changing any of the HTML.

Steve

blocks|key|535010|text|在某些情况下，我通常会忽略为单个元素上的简单样式更改创建一个新类。当你这样做的时候，通常很明显，你需要将这种特定的风格应用到以后的其他事情上的可能性很低，甚至为零。对我来说，最常见的情况是当我需要一些东西在正确的位置有一个特定的填充/边距，但它不是一个足够重要的元素来拥有它自己的ID。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535011|这在这里可能不是一个流行的观点，但在这些情况下，我不认为内联风格是邪恶的。|535012|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

There are some situations in which I usually neglect creating a new class for a simple style change on a single element. It is usually pretty clear when you are doing it that there's a low-to-zero chance of you needing to apply that particular style to something else later down the road. The most common case for me is when I need something to have a particular padding/margin to be in the right place but it's not an element important enough to have its own ID.

This may not be a popular opinion here, but in those scenarios I don't think an inline style is evil.

blocks|key|535131|text|就我个人而言，我发现我有一两个元素，我会放入一个内联样式，回头看看我需要的不仅仅是那个元素，所以我会把它改为一个类，或者忘记它而不能改变它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535132|您还可以尝试将某个div+/+page类放在样式表中，并为其编写派生样式，而不是内联元素。|535133|此外，如果您决定添加javascript，您将不会已经有一个标记良好的类，您需要更改它。|535134|对于动态生成的网站，这通常不是什么大问题，但当你做得太过了，有大量的内联标签需要切换时，这可能会成为一个大问题。如果人们想要禁用样式以实现可访问性等，这也会使他们更加困难--通常可以通过使用类来克服这一问题。|535135|比方说，使用<b+style="color:red">bold代替body.products+div+b+{color:red}。|offset|length|style|CODE|535136|我个人是选择器的粉丝，不使用太多的类。它们具有更高的可重用性，并且您可以使用样式表在一个地方编辑整个站点。|535137|但这是过度杀伤力，所以这是<p+class="indent+bold+larger">text+instead+you+can+do|535138|or+``。|535139|​|535140|entityMap^0|0|0|0|0|6|T|0|0|D|1L|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$J|12|K|13|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|15|8|@$J|16|K|17|L|M]]|9|@]|A|$]]|$1|R|3|S|5|6|7|18|8|@$J|19|K|1A|L|M]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1B|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|W|$]]

Personally, I've found that I have an element or two and I would put an inline style in, go back and see that I need more than that element, so I'd change it to a class or forget about it and be not able to change it.

You could also try putting a certain div / page class, and write descendent styles for that in the stylesheet instead of inline elements. 

Also, if you ever decide to add javascript, you won't already have a well-labeled class there and you'll need to change it.

Usually this isn't much problem with dynamically generated websites, but it can become a large problem when you go overboard and have tons of inline tags to switch out. It also can make it harder for people if they wish to disable styles for accessability etc-- you usually can overcome this by using a class.

Say, using <code>&lt;b style="color:red"&gt;bold&lt;/b&gt;</code> instead of body.products div b {color:red}.

I'm personally a fan of selectors, not using too many classes. They are more reusable, and you can edit the whole site in one place with the stylesheets.

But this is overkill <code>&lt;p style="font-weight:bold;font-size:1.2em; text-index:20px;"&gt;Indented Bold Paragraph&lt;/p&gt;</code> so it this <code>&lt;p class="indent bold larger"&gt;text&lt;/p&gt; instead you can do</code><code>or ``&lt;p&gt;&lt;b&gt;&lt;/b&gt;&lt;/p&gt;</code>.

blocks|key|4318242|text|“愚蠢的一致性是头脑狭小的地精”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4318243|那么，在这种情况下，哪一个是愚蠢的一致性？:)为什么DRY优先于标记和样式的分离？|4318244|你能确定你的CSS规则只被使用一次吗？更重要的是，你如何确定它在未来不需要改变，以及你如何确定你将是需要做出改变的人？你确定你甚至需要添加一个class或id来定位这个唯一的元素吗？|4318245|我想我很难看到如何添加|4318246|<input+type="submit"+style="border:+1px+solid+red;"/>|code-block|syntax|javascript|4318247|是一些比12个字符更“高级”的字符吗|4318248|<input+type="submit"+class="b-red">

.b-red+{border:+1px+solid+red;}|4318249|或转换为可能等效的字符数。|4318250|input+{border:1px+solid+red;}|4318251|当然，在某些情况下，每个经验法则都可以而且应该被违反。问题是，你从遵循DRY中获得了什么，而不是遵循标记/样式二分法的重要性？|4318252|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

"A foolish consistency is the hobgoblin of little minds"

So, in this case is which is the foolish consistency? :) Why does DRY take precedence over the separation of markup and style? 

Can you be sure that your CSS rule will only be used once? More over, how can you be sure that it won't need to be changed in the future, and how can you be sure that you would be the person needing to make the change? Are you sure you even need to add a class or id to target this unique element? 

I guess I am having trouble seeing how adding 

<pre><code>&lt;input type="submit" style="border: 1px solid red;"/&gt;
</code></pre>

is some how "superior" to 12 or so more characters

<pre><code>&lt;input type="submit" class="b-red"&gt;

.b-red {border: 1px solid red;}
</code></pre>

or to a potentially equivalent character count

<pre><code>input {border:1px solid red;}
</code></pre>

Of course there are situations where every rule of thumb can and should be violated. The question is, what do you gain from following DRY that outweighs the importance of following markup/style dichotomy?

You're creating an HTML layout. Let's assume that you don't need the benefits of multiple stylesheets, that a small increase in HTML size is not a concern, and that you have a style which will only be used once. I'm often in favour of using an inline style here, as I view the repetition of your CSS class name or ID as the cost of an abstraction you don't currently need, and may not ever use.

Standard doctrine these days is to always create HTML layouts using semantic markup and CSS styles, so am I missing something here? Please let me know your thoughts.

CSS vs DRY

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

您正在创建一个HTML布局。让我们假设您不需要多个样式表的好处，HTML大小的小幅增加并不是一个问题，并且您拥有一个只使用一次的样式。我通常倾向于在这里使用内联样式，因为我认为重复CSS类名或ID是您当前不需要的抽象的代价，并且可能永远不会使用。现在的标准原则是总是使用语义标记和CSS样式创建HTML布局，那么我是不是遗漏了什么？请让我知道你的想法。

问CSS vs DRY
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS vs DRYEN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS vs DRY
EN