css避免样式污染技巧_避免CSS hack和条件样式表的5个理由

css避免样式污染技巧

CSS is more of an art than a science. You can know about every combination of selector and be an expert in every styling property, yet still be unable to lay out and style your website as you want.

CSS不仅仅是一门科学，而是一门艺术。 您可以了解选择器的每种组合，并且可以成为每种样式属性的专家，但是仍然无法根据需要布置和样式化网站。

There are several reasons why developers from traditional programming backgrounds dislike CSS:

传统编程背景的开发人员不喜欢CSS的原因有很多：

1. Learning the rules is only half the game – you need experience to really understand CSS.
   学习规则只是游戏的一半-您需要经验才能真正理解CSS。
2. CSS can be illogical and require too much trial and error.
   CSS可能不合逻辑，并且需要过多的反复试验。
3. Even if Browser X renders your page perfectly, Browser Y could fail dramatically.
   即使浏览器X完美呈现您的页面，浏览器Y也会严重失败。

Many web sites and applications are considered complete only to find that it breaks in a certain browser. Web developers therefore resort to hacks and conditional CSS to fix the issues as quickly as possible.

许多网站和应用程序被认为是完整的，只是发现它在某个浏览器中损坏。 因此，Web开发人员诉诸于黑客和有条件CSS来尽快解决问题。

Unfortunately, quick-fix development can cause more problems in the long run…

不幸的是，从长远来看，快速修复程序开发可能会引起更多问题。

1. CSS validation may not be possible There are many tools, such as the Firefox console and the W3C validation service, that help developers find errors within CSS code. Unfortunately, hacks and conditional stylesheets often rely on invalid CSS to exploit a known browser bug or apply vendor-specific properties. If your CSS is already throwing errors, you may miss the real problems.

1.可能无法进行CSS验证有很多工具(例如Firefox控制台和W3C验证服务 )可以帮助开发人员在CSS代码中发现错误。 不幸的是，黑客和条件样式表通常依赖无效CSS来利用已知的浏览器错误或应用特定于供应商的属性。 如果您CSS已经抛出错误，那么您可能会错过真正的问题。

2. Your CSS becomes more complex Quick fixes generally apply further rules to your existing rule set. In the case of conditional CSS, those rules will also be in a separate file and only apply under certain conditions. Whilst tools such as Firebug can help locate and analyse the code, they are not available in every browser. The increased complexity makes debugging and maintenance more difficult.

2. CSS变得更加复杂快速修复通常会将更多规则应用于现有规则集。 对于条件CSS，这些规则也将放在单独的文件中，并且仅在某些条件下适用。 尽管Firebug之类的工具可以帮助查找和分析代码，但并非在所有浏览器中都可用。 增加的复杂性使调试和维护更加困难。

3. Your CSS may not be future-proofed Hacks rely on browser bugs. Unfortunately, the next version of that browser may fix the very bug you depended on. This was certainly one of the causes of IE6-compatible sites breaking in IE7, e.g. the * html selector was was incorrectly applied by IE6 but fixed in IE7.

3.您CSS可能无法适应未来黑客依赖于浏览器错误。 不幸的是，该浏览器的下一版本可能会修复您所依赖的错误。 这无疑是IE7兼容IE6兼容站点的原因之一，例如IE6错误地应用了* html选择器，但在IE7中已将其修复。

If your website already relies on IE6 and IE7 conditional stylesheets, it is extremely likely you will require one for IE8.

如果您的网站已经依赖IE6和IE7条件样式表，则很有可能您将需要一个IE8。

4. It is browser detection Webpages should be device-independent. Whilst we do not live in an ideal world, browser detection always feels a little dirty. It is certainly avoided in JavaScript and server-side code, so why use it for CSS?

4.是浏览器检测网页应该与设备无关。 尽管我们并不生活在理想的世界中，但浏览器检测总是让人感到有些肮脏。 在JavaScript和服务器端代码中肯定避免使用它，那么为什么要将它用于CSS？

5. There is rarely a need for them It is unusual to find a design that could not be created by an experienced coder using standard CSS that works in all the popular browsers (and, yes, that includes IE6). Minor rendering differences are always inevitable, but the CSS code can remain clean and valid for all browsers.

5.几乎不需要它们 。有经验的程序员无法使用在所有流行的浏览器中都可以使用的标准CSS来创建设计，这是不寻常的(是的，包括IE6)。 微小的渲染差异总是不可避免的，但是CSS代码对于所有浏览器都可以保持干净和有效。

Ultimately, hacks and conditional CSS can lead to poor development practices and a failure to diagnose or understand the real problem. The key is to test early and test often: find the issues at the start of the project and you will not need to resort to quick fixes at the end.

最终，黑客和有条件CSS会导致不良的开发实践以及无法诊断或理解真正的问题。 关键是尽早进行测试并经常进行测试：在项目开始时就发现问题，而您最终无需采取快速修复的措施。

Don’t believe me? See 10 Fixes That Solve IE6 problems…

不相信我吗 请参阅解决IE6问题的10个修补程序 ...

Have you successfully avoided hacks and conditional CSS or have they been essential within every project?

您是否成功避免了hack和有条件CSS，或者它们在每个项目中都是必不可少的？

翻译自: https://www.sitepoint.com/5-reasons-to-avoid-css-hacks-and-conditional-stylesheets/

css避免样式污染技巧