您是否使用任何工具进行快速 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 的 fork 可以在 vim 上运行（我现在使用它）。

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

Answer 1

Blueprint CSS 框架有一个类似于快速 HTML/CSS 开发的标语：

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

Answer 2

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

也许对别人有用，但对我没用。

如果关于一般有用性的讨论是您所寻找的。第二次看你的帖子，我不再那么确定了。反正。 :)

Answer 3

如果您正在开发 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 4

我真的很惊讶你们会进行这样的对话。

我从事 Web 开发已有 4 年了，我不记得上次我不得不写类似的东西是什么时候了

<li>some text</li>

在单个实例中不止一次。

我在任何给定点上写的最多的 html 是这样的

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

不用说，我真的不明白学习一种工具来加快静态 HTML 的编写速度。这就像得到一个更大的铲子，你只会把自己挖成一个更大的整体。

我想你应该问问自己，我怎样才能消除我生成的静态 html 的数量？

该问题的答案是使用 Joomla、Drupal 或 Wordpress 等 CMS。 如果您绝对必须编写静态 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 上下文中并不完全有意义，因为您永远不会在不提供指向它们的链接的情况下创建标签。但我希望你有一个想法。