什么是整理CSS的最好的方法？ [英] What is the best method for tidying CSS?

问题描述

我正在整理过去曾被不同人修改过的网站。
这是我的网页的骨架。

• test.html


• nav.css


• default.css


• content.css

ul>



我认为CSS可以做一个正确的tidyup。我在想使用这样的重置 http://meyerweb.com/





替换：

  * {margin：0; padding：0;} 
  

并且可能将css分成fonts.css，layout.css

任何想法，建议我如何解决这个问题将不胜感激。

解决方案

您可能希望将css封装在更加正式的CSS框架中。你可以创建自己的自定义框架，但有一些有用的开源CSS框架，如yahoo的YUI和蓝色打印CSS
http://www.blueprintcss.org/





这种方法的好处在于它利用了大量的努力来解决跨浏览器问题围绕字体和布局。





根据您的距离，您可能需要大量触摸现有的标记。根据你的网站有多大，我会尝试增量调整样式，并将它们迁移到正式的CSS框架。长期来说，这将使CSS更易于管理，并且熟悉框架概念的其他开发人员很容易理解。





逐步尝试消除多余和未计数的样式。 p>



我还会创建一个debug.css文件。获取所有旧样式名称并向其添加标识样式。例如：

  .myoldstyle {border：solid 1px red}; 
  

然后您可以检测整个网站中旧样式的使用位置。每种风格都应该考虑并移植到新系统。当旧系统中的特定样式已正确迁移到新系统时，可以从debug.css文件中删除（或更好地注释掉）识别样式。当debug.css在显示输出中没有任何副作用时，您可以确信已迁移了所有样式。





这可能是一个耗时的过程，但接近它系统地可以是有帮助的。





此外，你可能想开始看你的网站没有css。只是得到一个逻辑和语义标记的代码的感觉。拥有一个干净的HTML代码库有助于调试风格的怪癖。





对于CSS的组织，我喜欢分成基本类别：布局，排版，外观，导航





将所有与颜色相关的信息保存在lookandfeel样式表中。这是你将花费最多的时间来满足客户的视觉品味和欲望的地方。它是方便的保持，是一个单独的逻辑样式表。其他东西更加功能和标准化。有了这个抽象，使得更容易隔离样式的视觉效果。





最后一个提示，查看Firefox firebug插件或Safari的debbugger。这些可以显示计算样式（样式和元素最终导出为各种样式应用的方式），你可以实时调整特定样式你想要探索的复杂CSS中特定样式变化的影响系统。





最重要的是，保持一个单独的ie.css文件。这应该是标题中引用的最后一个样式表。如果你需要做任何解决方法为IE放在这里。并且只通过条件注释将此样式表公开到IE。





http://www.quirksmode.org/css/condcom.html





这是解决IE 6问题的最快方法。




I'm tidying up a website that has been previously modded by different people in the past. Here is the skeleton of the page I have..

• test.html
• nav.css
• default.css
• content.css

I think the CSS could do with a proper tidyup. I was thinking of using a reset like this http://meyerweb.com/

to replace :

*{margin: 0; padding: 0;}

and maybe split up the css into fonts.css, layout.css

Any thoughts, suggestions how I can tackle this problem would be grateful.

解决方案

You might want to encapsulate your css within a more formal CSS framework. You can create your own custom framework but there are some useful open source css frameworks such as yahoo's YUI and Blue Print CSS http://www.blueprintcss.org/

The nice thing about this approach is that it leverages a lot of effort to fix the cross browser issues around fonts and layout.

Depending how far you go you may have to extensively touch the existing markup. Depending on how large your site is I would try to incrementally adjust styles and migrate them over to the formal CSS framework. Long term this will make the CSS more manageable and easily understood by other developers familiar with the concept of the framework.

Progressively try to eliminate redundant and unaccounted for styles.

I would also create a debug.css file. Take all the old style names and add an identifying style to them. For example:

.myoldstyle {border: solid 1px red};

Then you can detect where the old style is being used throughout the site. Each style should be accounted for and ported over to the new system. When a particular style in the old system has been correctly migrated to the new system you can remove (or better comment out) the identifying style from the debug.css file. You can be confident that you have migrated all the styles when the debug.css shows no side affects in the display output.

It can be a time consuming process but approaching it systematically can be helpful.

Also, you may want to start looking at your site with no css at all. Just get a sense of the logical and semantic markup of code. Having a clean HTML code base helps when debugging style quirks.

As for organization of CSS, I like to separate into basic categories: layout, typography, lookandfeel, navigation

Keep all color related information in the lookandfeel style sheet. This is where you will spend the most time trying to meet the client's visual tastes and desires. It is handy to keep that is a separate logical style sheet. The other stuff is more functional and standardized. Having this abstraction makes it much easier to isolate the visual effects of styles.

And one last tip, check out Firefox firebug plugin or Safari's debbugger. These can show you computed styles (the way styles and elements are ultimately derived as the various styles are applied) and you can tweak specific styles in real time on the fly it you want to explore the effects of a specific style change in a complex CSS system.

And most importantly, keep a separate ie.css file around. This should be the last style sheet referenced in your headers. If you need to do any workarounds for IE put them here. And only expose this style sheet to IE through conditional comments.

http://www.quirksmode.org/css/condcom.html

That is the fastest way to resolve IE 6 problems.

这篇关于什么是整理CSS的最好的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！