Mac CSS 编辑器评论

市面上有一些非常棒的软件可以用来创建和编辑 CSS 文件。 由于我主要使用 Mac，因此这篇评论以 Mac 为中心，但如果您有任何 Windows CSS 编辑器要分享，我非常乐意听取您的意见。 毕竟，最重要的是找到最适合工作的工具。

Xyle Scope

可从 Cultured Code 获取，价格为 19.95 美元。

Xyle Scope 采用了一种完全可视化的 CSS 编辑器方法。 本质上，它是一个 Web 浏览器，使您能够直接在页面上选择元素。 窗口的侧边栏将“向下钻取”，并显示您选择的任何元素的 HTML 和 CSS。 您可以在页面上直接进行编辑并查看其效果。 这是一项非常强大的功能，也是一个用于排查布局问题的好工具。 事实上，Xyle Scope 已成为我用于快速排查问题的首选工具。

Xyle Scope 有一些缺点。 首先，它并不是真正的“CSS 编辑器”。 它没有传统的“代码视图”，也没有办法保存您在非本地网站上编辑的 CSS。 这使得它更像是一个排查问题工具，而不是一个完整的编辑器。 我认为这可能是他们的意图，因此称为“Scope”。 另一个缺点是，就 Web 渲染而言，它本质上是 Safari。 所以排查问题基本上局限于一个已经相当不错的浏览器。 即使您进行了更改然后在其他浏览器中“预览”，这些更改也不会保留，所以这有点意义。

CSS Edit

可从 MacRabbit Store 获取，价格为 29.95 美元。

CSS Edit 最大的 **优势** 是它是一个真正的功能齐全、功能丰富的 CSS 编辑利器。 编辑窗口是最好的，它具有一个包含所有选择器的左侧边栏，一个包含“代码”视图的中间窗格，以及一个包含一个易于使用的点击按钮进行编辑的样式编辑器的右侧边栏。

将所有这些功能整合到一个编辑器窗口中是一个很棒的举措。 如果我看不到它实际上对代码做了什么，我不太喜欢简化的编辑器。

CSS Edit 绝对包含了许多很酷的功能，例如内置代码验证、轻松注释、选择器“分组”、搜索和里程碑管理。 但在我看来，使 CSS Edit 如此出色的两个主要功能是 **Override** 和 **Extract**。

Override 使您能够访问任何网页，并开始在该网站上玩弄 CSS，并查看效果。 这在您自己的网站上可能很有用，可以用来做一些调整，找出使您的网站看起来更好的方法，或者可以在其他人的网站上使用，以了解他们的方法并进行调整。 Override 还特别强大，因为它允许您对影响 *动态内容* 的 CSS 进行编辑和更改，而无需“自行尝试”。

Extract 类似于 Override，它允许您从互联网上的任何页面中直接提取 CSS。 然后您可以将其保存，并根据需要使用它。 想想它还挺有趣的。 它感觉有点像侵犯版权，但我认为只要您不连同 CSS 一起盗用图像，这就不算侵权。 这是一种非常棒的方式，可以分解其他人的技术，并将它们应用到您自己的网站上。 没有其他软件能像它一样轻松地“提取” CSS。

CSS Edit 最大的 **缺点** 是它是一个功能齐全、功能丰富的 CSS 编辑利器。 如果您已经知道自己在做什么，那么有时一个庞大而沉重的应用程序并不是您想要的。 就我个人而言，CSS Edit 对我来说太复杂了，我只在提取、了解 **非常** 陌生的 CSS，以及有时只是为了娱乐而使用它 =）。

Firefox + Firebug

由 Joe Hewitt 提供，可从 FREE 获取。

Firebug 是一个 Firefox 扩展，而不是独立软件。 它会在浏览器窗口的底部栏中安装一个小图标，该图标基本上处于两种状态之一。 如果您正在查看的页面状况良好，则显示一个小绿色的勾号，如果网站存在问题，则显示一个红色的 X。 点击该图标会打开编辑器区域。

作为一个“仅仅是 Firefox 扩展”的软件，Firebug **非常** 强大。 与前面提到的任何一个程序类似，您可以进入“检查”模式，这使您能够将鼠标悬停在页面元素上并查看其 HTML 和 CSS。 您可以在页面上直接编辑 CSS 或 HTML，并查看其效果。 您可以在下拉菜单格式或原样查看代码，下拉菜单格式使用小箭头打开和关闭部分。 您甚至可以在“布局”模式下查看 CSS，以便查看任何元素的偏移量、边距、边框、填充和大小。 我发现 Firebug 非常强大且方便，因为您甚至不必离开 Web 浏览器。

Firebug 与 Xyle Scope 共享一些缺点。 它在预览能力方面受到限制，因为它只能在 Firefox 中运行。 您无法保存修改。 由于这些原因，Firebug 更像是一个排查问题工具，而不是一个真正的编辑器。 但是，由于 Firebug 拥有诸如 DOM 分析、JavaScript 错误和验证等额外功能，因此它是我首选的排查问题工具。

Coda

Coda 可从 Panic 获取，价格为 79 美元。

Coda 是一个新面孔，在我看来，它是 Web 开发领域的大佬。 Coda 拥有一个内置的 CSS 编辑器，类似于 CSS Edit，它有选择器区域和点击按钮进行编辑的区域。 它没有用于同时查看代码的拆分视图，但可以在 CSS 视图和编辑视图之间轻松切换。

Coda 具有很好的代码高亮显示功能，就像 Mac 上最受欢迎的文本编辑器 TextMate 一样。 它还拥有一个内置的预览区域，可以立即查看更改的结果。 这对我来说很适合，因为我偏爱的 CSS 编辑技术是在普通文本编辑器中查看和编辑代码，然后保存并查看更改。 不过，真正使 Coda 脱颖而出的是它所做的一切。 它是一个很棒的 FTP 客户端，能够以非常直观的方式保存您的网站。 拆分视图 FTP/编辑窗口是一个天才之举，代表着 Web 开发的未来。 它内置了一个终端程序，用于访问服务器的 shell。 最后但并非最不重要的是，它内置了 HTML、CSS、JavaScript 和 PHP 的参考手册，方便您快速查找。

Coda 设计精美，适应性和可调整性极佳。 出于所有这些原因，我在 90% 的编码时间里都在使用 Coda。 感谢 Panic 推出这款令人赞叹的产品。