marctrix: suche bekannte CSS Frameworks ohne Skriptunterstützung wie JS

Beitrag lesen

Hej dedlfix,

Da wir aber auch komplexe webanwendungen für umfangreiche Vergabe-Verfahren oberer Verwaltungsbehörden entwickeln, frage ich mich immer, warum (und vor allem) was andere da so viel mehr benötigen. Bei uns wird kein Telerik Tool eingesetzt und was ich da auf der Website als Animationen gesehen habe, kommt mr irgendwie wie Schnickschnack vor.

Animationen sind überhaupt nicht mein Ziel.

Missverständnis! 😉

Auf der Telerik-Seite gibt es Animationen, die zeigen, was man mit Tabellen so treiben kann (nach Spalten sortieren usw) - jedenfalls auf der Seite, die ich mir angeschaut hatte.

(https://developer.mozilla.org/en-US/docs/Web/Web_Components) seine Anwendung in funktionale Komponenten aufteilt und so zusammengehöriges HTML, Javascript/Typescript und CSS lokal beieinander hat, statt dass man drei globale Dateien hat, wo man erst suchen muss, was zu wem gehört.

Gerade darüber haben wir uns gestern auf der Arbeit unterhalten, weil es auch chic scheint, wenn man eine TYPO3-Extension so programmiert, dass man ein unabhängiges Paket hat.

Wir haben aber beispielsweise Suchformulare, die aus einer eingebundenen PHP-Anwendung kommen, aus TYPO3-Extension oder dem TYPO3-Kern - und die sollen so aussehen wie die Suche auf anderen von uns betreuten Portalen.

Das Problem: wenn man also für drei Extensions, den T3-Kern und eine Individual-Programmierung dasselbe Aussehen erhalten möchte, muss man 5 mal dasselbe CSS ausliefern. Bei jeder Anpassung muss man 5 Dateien anpassen (und vergisst schnell mal eine).

Jetzt kann man sich natürlich Mechanismen ausdenken, die das CSS von einer Quelle für Wahrheit ziehen und an alle Stellen verteilt. Gerade wenn man die 5 Dinge aber in sich kapselt, will man vielleicht nicht auf so externen Kram angewiesen sein.

Außerdem muss dafür in allen Kompnenten das HTML des Suchformulars identisch sein, sonst zieht das geänderte CSS ja nicht überall.

Und dann hat man das Layout, das in der großen Projekt-CSS für dieses HTML vorgegeben ist ja sowieso.

Daraus resultiert mein Vorschlag: ich gebe das HTML für häufig genutzte Komponenten vor.

Jeder Entwickler - egal ob Java, Python, PHP, mit oder ohne Angular, Zend, Symfony, Spring oder was auch immer muss dafür sorgen, dass das HTML nicht identisch zu meiner Vorgabe ist, aber kompatibel dazu.

Heißt: ich gebe so etwas vor:

<form id=„ID_main-search“> <label for=„ID_main-search-keyword“>Stichwortsuche</label> <input type=„search“ id=„ID_main-search-keyword“> </form>

Der Entwickler darf da gerne so etwas draus machen (also zusätzliche DIVs und Klassen):

<form id=„ID_main-search“ class=„search-form“> <div class=„foo bar“> <label for=„ID_main-search-keyword“ class=„label“>Stichwortsuche</label> <input type=„search“ id=„ID_main-search-keyword“> </div> </form>

Wenn er damit Mist macht (seine Klassen für ein eigenes Design, das den Vorgaben nicht entspricht missbraucht), werde ich ihn in der nächsten Besprechung bitten, das zu lassen und auf die bestehenden Absprachen hinweisen.

Für mich zählt nur, dass ich mich darauf verlassen kann, mein vorgegebenes HTML zu haben, um meine Arbeit zu erfüllen. Oft sind ja weitere Angaben für die Programmierung nötig.

Dann braucht der Programmierer in seinem Paket gar kein CSS mehr. Und das macht sehr viel Sinn. Solche Komponenten sollen (in meiner Welt) nie so aussehen, wie es dem Programmierer gefällt, sondern wie es das Design für die gesamte Website vorgibt.

Das kann man mit Kommentaren als Zwischenüberschriften aber prima unterteilen. Ist eigentlich die von mir favorisierte Vorgehensweise, dann kann ich mit Strg-F alle Vorkommen eines bestimmten Strings schnell finden. Aber SASs geht da ja eh einen anderen Weg und das macht auch Sinn und ich nutze das sehr stark. Da ist es dann auch überhaupt kein Problem mehr — falls das wirklich mal nötig sein sollte — mittels import Komponenten-spezifische Styles reinzuziehen.

Ein Datei project.scss gibt es sowieso standardmäßig immer.

Natürlich sind das nur meine Sorgen als Programmierer, und in den Entscheidungsprozess fallen auch alle anderen bekannten Kriterien der Aufgabenstellung und der Situation beim Kunden und den Anwendern. Aber gute Struktur im Hintergrund hilft auch bei der Qualität dessen, was oberflächlich (im Sinne von UI) zu sehen ist.

Unbedingt. Darüber mache ich mir den ganzen Tag Gedanken. Du offenbar auch. Und ich könnte mir vorstellen, dass sich bei jemandem, der so strukturiert denkt wie du, angepasste Strukturen etablieren lassen, wenn du von den Vorteilen überzeugt bist. 😉Aber diese Vorteile muss es dann natürlich auch geben.

Marc

--
Ceterum censeo Google esse delendam
0 105

suche bekannte CSS Frameworks ohne Skriptunterstützung wie JS

  1. 1
    1. 0
      1. 0
        1. 0
          1. 1
            1. 0
        2. 0
        3. 2
      2. 0
        1. 0
          1. 0
          2. 0
            1. 0
              1. 1
                1. -1
                  1. -1
                    1. 0
                      1. 0
                        1. 1
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                                  1. 0
                                    1. 0
                                      1. 0
                                        1. 0
                                      2. 1
                                        1. 0
                            2. 2
                              1. 0
                                1. 3
                                  1. 0
                                    1. 4

                                      Kompromisslosigkeit für die User schädigt letztlich nur die User...

                                      1. 1
                                        1. 1
                                          1. 1
                                            1. 1
                                            2. 2
                                              1. 2
                                                1. 0
                                                  1. 1
                                                  2. 0
                                                    1. 0
                                                      1. 0
                                                        1. 1
                                                          1. 0
                                                            1. 0
                                                            2. 0
                                                              1. 0
                                                2. 1
                                                  1. 0
                                                    1. 0
                                                      1. 0
                                                        1. 0
                                                          1. 0
                                                            1. 0
                                                            2. 0
                                                              1. 0
                                          2. 0
                                            1. 0
                                              1. 0
                                                1. 0
                                                  1. 1
                                                    1. 0
                                                      1. 0
                                                        1. 0
                                                          1. 0
                                                            1. 0
                                                              1. 0
                                                                1. 0
                                                                  1. 0
                                                2. 0
                                    2. 0
                              2. 1
                                1. 1
                                  1. 0
                                    1. 0
                                      1. 0
                                2. 0
                                  1. 0
                                    1. 0
                                  2. 0
                                    1. 0
                                  3. 1
                                    1. 0
                  2. 0
                    1. 0
                      1. 0
        2. 0
          1. 0
            1. 0
              1. 2
                1. 1
          2. 0
            1. 0
              1. 2
                1. 0
                  1. 2
                    1. 0
                      1. 2
                        1. 0
                          1. 0
                            1. 0