你使用任何工具来快速开发 html/css 吗？

Question

我刚刚听说 zen-coding，它基本上只是一个生成标记的脚本基于 css-esque 选择器，例如：

div#foo > p*6

生成

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

编辑：这是一个更高级的示例..

PS - 我什至没有使用任何 API，我完全是根据我的 CSS 选择器猜测的知识，这对我来说非常简单和直观。

ul#nav > li[id] * 6 > a

生成

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

当您按下 Ctrl-E 等快捷键时 。如果您进行大量前端开发，则非常非常有用。我的想法恰恰相反，一个 CSS 选择器生成器，它基本上解析标记并生成选择器，这样人们就可以进入 Firebug 等工具并快速查看点上的实时更改，我只是从来没有费心去实际完成我的脚本开始了。

目前 TextMate、Dreamweaver、Aptana、NetBeans 支持它，遗憾的是 vim/emacs 不支持它，但是有一个名为 sparkup 可以在 vim 上运行（我现在用它）。

我想知道过去是否有人遇到过这样的插件或工具 - 我知道 Vim/Textmate/Emacs 和其他强大的编辑器中有片段脚本，只是好奇外面还有什么。

Answer 1

嗯。我每天写大量的 HTML 和 CSS，但我并不兴奋。你提到的那段话我用了五秒钟写完，并按了六次 Ctrl+C 和 Ctrl+V。诚然，在某些情况下元语言可能会节省更多时间，但我从未觉得需要一种元语言。当确实需要生成大量 HTML（或 SQL、或数组）时，我会为该任务编写一个小型 PHP 或 VB 脚本。我不希望另一种元语言用另一种语言产生某些东西。

也许对其他人有用，但对我没用。

如果关于一般用途的讨论正是您所寻找的。第二次读你的文章，我不再那么确定了。反正。 :)

Answer 2

如果您正在开发 Rails，请查看 Sass 和 Haml

Sass 可以使用变量并进行基本数学运算：

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

渲染：

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml 使用缩进而不是 div 并匹配 css # 和 .用于标记类和 div 的系统：

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

渲染到：

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Answer 3

我真的很惊讶你们能进行这样的谈话。

我从事 Web 开发已有 4 年了，我不记得上次我不得不

<li>some text</li>

在单个实例中编写类似的东西是什么时候了。

我在任何给定点上写的最多的 html 都是类似的东西，

<ul>
<?php foreach ( $menu as $item ) : ?>
 <li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>

不用说，我真的不认为学习一个工具来加速静态 HTML 的编写有什么意义。这就像拿到一把更大的铲子，你只会把自己挖成一个更大的整体。

我认为您应该问自己，如何消除生成的静态 html 数量？

这个问题的答案是使用 CMS，例如 Joomla、Drupal 或 Wordpress。
如果您绝对必须编写静态 html 站点，请查看类似 Sphinx 的内容。

Sphinx 完全消除了编写 HTML 的需要，它允许您创建具有多个页面的静态站点，而无需编写单个硬编码的 html 链接。

Sphinx 使用 reStructuredText 标记。我将向您展示如何在 reStructuredText 中生成代码。

- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`

.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: https://www.sphinx-doc.org

我试图展示这如何与 reStructuredText 一起使用，您所拥有的示例在 Sphinx 上下文中并不完全有意义，因为您永远不会在不提供指向标签的链接的情况下创建标签。但我希望你能明白。

Answer 4

Blueprint CSS 框架有一个类似快速 HTML/CSS 开发的口号：

花时间创新，而不是复制。