10 款非常棒的CSS代码格式化工具推荐
openkk 12年前
如果你刚开始学习CSS，这意味着你的很多代码或结构可能需要优化，比如你可能过多使用了类、添加了多余的间隔或空行等等，这将导致代码臃肿、混乱，可读性和执行效率将大大降低。 <br /> <br /> 本文为你整理了几款CSS工具，借助它们，你可以轻松写出漂亮的CSS代码。 <br /> <br /> <strong><a href="/misc/goto?guid=4958318549805400541" target="_blank">1. CSS Lint</a></strong> <br /> <br /> 这是一个在线工具，可以帮助你检测CSS代码中的问题。该工具可以对一些基本的语法进行评估，并使用一套规则，以寻找有问题或效率低的代码。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/6dd1108654abbce0e838c5a592744fd0.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318550598630175" target="_blank">2. CSS Compressor</a></strong> <br /> <br /> 这是一个有用的工具，可以帮助你压缩CSS，以提高加载速度和优化网站。该工具提供了三个压缩级别，主要依据可读性与压缩的关系进行分级。当然，你也可以切换到高级模式以设置更多的参数。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/649757bc85a2cbe963c0163246db6c24.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318551395926640" target="_blank">3. ProCSSor</a></strong> <br /> <br /> 这是一个伟大的免费工具，可以以你想要的方式为CSS代码添加格式，并优化你的CSS代码，使其更加轻量且易读。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/3902f1fcb51b6251706218829873ded2.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318552185294728" target="_blank">4. Easy CSS Styler</a></strong> <br /> <br /> 这是一个可视化的CSS代码生成器，你只需要选择你想要的样式、形状和大小即可。你可以很方便地下载或复制自动生成的CSS代码，并应用在你的网站中。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/3600e18e887ee44c8dbbca4fa186dd4b.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318552974508502" target="_blank">5. Styleneat</a></strong> <br /> <br /> 一个CSS代码处理器，用于组织和标准化你的CSS代码。还可以按照CSS属性和选择器的字母顺序进行排序。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/655f4f818431d029fc0ea342e55c0b1d.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318553765408624" target="_blank">6. PCSS</a></strong> <br /> <br /> 一个基于PHP5的CSS格式化工具，可以帮助开发者编写更好的CSS代码，部分功能包括类嵌套、服务器端细节、默认单位和变量等。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/c5133d72d4feb5ef6b81d8c4986818c1.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318554559806337" target="_blank">7. Normalize</a></strong> <br /> <br /> 这是一个可定制的CSS文件，可以让现代浏览器一致地渲染所有的元素。该工具可评估主要浏览器之间的不同，以便精确检测到需要标准化的元素。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/dfbb1fc95c45488af41b88373b076f6a.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318555336987140" target="_blank">8. CSS Pivot</a></strong> <br /> <br /> 使用CSS Pivot，你可以添加CSS样式到任何网站，并可以使用一个短链接向其他人分享这些结果。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/b992a6663682075e00ce9fffeed1046d.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318556121871072" target="_blank">9. PrefixMyCSS</a></strong> <br /> <br /> PrefixMyCSS非常易于使用，并会为你节省大量写代码的时间。它可以自动为CSS代码添加必要的属性。粘贴你的代码到左边的框中，点击“prefix”就会自动为CSS代码添加必要的前缀。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/b70f95cc0c206f8eeb716797e1ca263b.jpg" width="580" height="150" /> </div> <br /> <br /> <strong><a href="/misc/goto?guid=4958318556908665236" target="_blank">10. CSS Prefixer</a></strong> <br /> <br /> CSS Prefixer无需多说，它可以帮助你轻松地为CSS添加格式，只需粘贴你需要增强的代码即可。 <br /> <br /> <div style="text-align:center;"> <img alt="10 款非常棒的CSS代码格式化工具推荐" src="https://simg.open-open.com/show/fd6ecb50c3956632c0f7b6b5c27829d5.jpg" width="580" height="150" /> </div> <br /> <br /> <br /> 英文原文： <a href="/misc/goto?guid=4958318557717196642" target="_blank">http://www.jquery4u.com/dynamic-css-2/10-awesome-css-format-tools/</a> <br /> <br /> 转自： <a href="/misc/goto?guid=4958318558492586184" target="_blank">http://www.iteye.com/news/23692</a>