Verwenden Sie irgendwelche Tools für die schnelle html/css-Entwicklung?

Question

Ich habe gerade von zen-coding das im Grunde nur ein Skript ist, das Markup auf der Grundlage eines css-ähnlichen Selektors erzeugt, z. B:

div#foo > p*6

erzeugt

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

bearbeiten : Hier ist ein fortgeschrittenes Beispiel

Und PS - ich bin nicht einmal durch eine API, ich bin völlig erraten auf der Grundlage meiner CSS-Selektor Wissen, ist dies sehr einfach und intuitiv für mich.

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

Erzeugt

<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>

wenn Sie eine Tastenkombination wie Strg-E drücken. Sehr sehr nützlich, wenn Sie eine Menge von Front-End-Entwicklung zu tun. Ich hatte die Idee, das genaue Gegenteil, ein CSS-Selektor-Generator, der im Grunde parst Markup und generiert Selektoren, so kann man in einem Tool wie Firebug gehen und schnell Live-Änderungen auf den Punkt zu sehen, ich habe nur nie die Mühe gemacht, tatsächlich das Skript, das ich begonnen hatte zu beenden.

Es wird derzeit von TextMate, Dreamweaver, Aptana und NetBeans unterstützt, leider nicht von vim/emacs, aber es gibt einen Fork namens . das mit vim funktioniert (ich benutze es jetzt).

Ich frage mich, ob jemand in der Vergangenheit auf solche Plugins oder Tools gestoßen ist - ich bin mir bewusst, dass es Snippet-Skripte in Vim/Textmate/Emacs und anderen leistungsstarken Editoren gibt, ich bin nur neugierig, was es sonst noch in der freien Wildbahn gibt.

Answer 1

Hm. Ich schreibe jeden Tag eine Menge HTML und CSS und bin nicht begeistert. Den Absatz, den Sie erwähnen, schreibe ich in fünf Sekunden, und sechsmal Strg+C und Strg+V. Zugegeben, es mag Szenarien geben, in denen eine Metasprache mehr Zeit spart, aber ich hatte noch nie das Bedürfnis danach. Wenn wirklich große Mengen an HTML - oder SQL oder Arrays - zu erstellen sind, schreibe ich ein kleines PHP- oder VB-Skript für diese Aufgabe. Ich würde keine weitere Metasprache brauchen, um etwas in einer anderen Sprache zu erzeugen.

Vielleicht für andere nützlich, aber nicht für mich.

Wenn die Diskussion über die allgemeine Nützlichkeit war das, was Sie gesucht haben. Wenn ich Ihren Beitrag ein zweites Mal lese, bin ich mir da nicht mehr so sicher. Wie auch immer :)

Answer 2

Wenn Sie Schienen entwickeln, sehen Sie sich Sass y Haml

Sass kann Variablen verwenden und grundlegende mathematische Berechnungen durchführen:

// Sass

!blue = #3bbfce
!margin = 16px

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

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

rendern:

/* CSS */

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

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

Haml verwendet Einrückungen anstelle von divs und entspricht dem css-System # und . zur Kennzeichnung von Klassen und divs:

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

überträgt sich auf:

<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

Ich bin wirklich erstaunt, dass ihr dieses Gespräch führt.

Ich beschäftige mich seit 4 Jahren mit Web-Entwicklung und kann mich nicht erinnern, wann ich das letzte Mal etwas schreiben musste wie

<li>some text</li>

mehr als einmal in einem einzigen Fall.

Das meiste Html, das ich an einem bestimmten Punkt schreiben würde, ist etwa so

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

Unnötig zu sagen, dass ich wirklich keinen Sinn darin sehe, ein Tool zu erlernen, das das Schreiben von stastischem HTML beschleunigt. Das ist so, als würde man sich eine größere Schaufel besorgen, man gräbt sich damit nur in ein noch größeres Loch.

Ich denke, Sie sollten sich fragen, wie ich die Menge an statischer HTML, die ich generiere, eliminieren kann.

Die Antwort auf diese Frage ist die Verwendung von CMS wie Joomla , Drupal o Wordpress . Wenn Sie unbedingt statische HTML-Seiten schreiben müssen, sollten Sie sich etwas wie Sphinx .

Sphinx macht das Schreiben von HTML komplett überflüssig und ermöglicht es Ihnen, statische Websites mit mehreren Seiten zu erstellen, ohne auch nur einen einzigen hart kodierten HTML-Link zu schreiben.

Sphinx verwendet reStructuredText Aufschlag. Ich werde Ihnen zeigen, wie Sie Ihren Code in reStructuredText generieren.

- `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

Ich habe versucht zu zeigen, wie dies mit reStructuredText funktionieren würde. Das Beispiel, das Sie haben, macht im Sphinx-Kontext nicht wirklich Sinn, da Sie niemals Tags erstellen würden, ohne Links zu ihnen zu erstellen. Aber Sie bekommen eine Idee, hoffe ich.

Answer 4

En Blaupause CSS Framework hat eine schnelle HTML/CSS-Entwicklung wie Tagline:

Verbringen Sie Ihre Zeit mit Innovation, nicht mit Nachahmung.