REDAXO Forum

Darf man hier auch eine Wunschliste schreiben?

Ich verzweifle mal wieder am REX(4)-Backend. Mir ist klar, dass vieles hier historisch gewachsen ist, aber wenn ich in den Quelltext + das zugehörige CSS sehe bekomme ich das kalte Grausen.

1. CSS-Klassen-Namespace „rex“ - ist das so sinnvoll?
2. CSS-Klassen Wiederholung der Struktur:

Was sollen Klassen wie "rex-content-editmode-slice-input" wenn der zugehörige Pfad so aussieht:

Code: Alles auswählen

html 
  body#rex-page-content.be-style-agb-skin 
    div#rex-website 
      div#rex-wrapper 
        div#rex-wrapper2 
          div#rex-output 
            div.rex-content-body 
              [b]div.rex-content[/b]-body-2 
                [b]div.rex-content-editmode [/b]
                  div.rex-content-editmode-slice-output

Das führt dann zu Wahnsinns-CSS wie diesem:

Code: Alles auswählen

div.rex-content-editmode div.rex-form-content-editmode, 
div.rex-content-editmode div.rex-form-content-editmode div.rex-form-wrapper, 
div.rex-content-editmode div.rex-form-content-editmode-add-slice, 
div.rex-content-editmode div.rex-form-content-editmode-add-slice div.rex-form-wrapper, 
div.rex-content-editmode div.rex-form-content-editmode-edit-slice, 
div.rex-content-editmode div.rex-form-content-editmode-edit-slice div.rex-form-wrapper {
	background-color: transparent;
}

oder

Code: Alles auswählen

/*  Modulname, SliceNavi */
div.rex-content-editmode div.rex-form.rex-form-content-editmode-add-slice div.rex-content-editmode-module-name, 
div.rex-content-editmode div.rex-content-editmode-module-name.rex-form-content-editmode-edit-slice, 
div.rex-content-editmode div.rex-form-content-editmode-edit-slice div.rex-navi-slice, 
table.rex-table tr.rex-metainfo-cat-b td {
  background-color: #F4FECF;
}

(AKG) Skin

Ziel müsste sein, eine CSS-Klassen-Verschachtelung aufzubauen, evtl. mit relevanten EInstiegspunkten, die per ID ausgezeichnet werden.

3. HTML-Struktur:

Auch hier sollte nachgebssert werden. Im Artikeleditor z.B. würde sich anbieten, die Linearstruktur zugunsten einer Hierarchie zu ändern. Z.B.

Code: Alles auswählen

<div class="rex-content-body">
  <ul id="SliceList" class="edit-mode">

    <li class="Slice add-block">
      ...
    <li>

    <li class="Slice">
      ...
    <li>

    <li class="Slice active">
      <form>
        <div class="Header">
          <h3>Block Name</h3>
          <ul class="Tools">
            <li class="Button first">
              <a />
            </li>
            <li class="Button">
              <a />
            </li>
          </ul>
          <legend>Block editieren</legend>
        </div>
        
        <input type="hidden" / > 
        ...
        
        <!-- *** OUTPUT OF MODULE-OUTPUT - START *** -->
        
        ...
        
        <!-- *** OUTPUT OF MODULE-OUTPUT - END   *** -->
        
      </form>
    </li>

    <li class="Slice add-block">
      ...
    <li>

    <li class="Slice">
      ...
    <li>

    <li class="Slice add-block">
      ...
    <li>

  </ul>
</div>

- #SliceList kann im CSS direkt angesprungen werden
- .active erlaubt, bspw. den Editierblock farblich abzusetzen (und gleichzeitig deren Unterelemente hierarchisch anzuspringen)
- Dazu ist aber nötig, z.B. Namen des Block mit in die Struktur aufzunehmen (vorher war das Element nebengeordnet, ein aktueller Edit-Mode war nicht zu bestimmen)
- Elementstukturen so „hoch“ wie möglich auszeichnen (hier z.B. Button im <li> letzen, statt das input/a-Element auzuzeichnen.

Im Beispiel habe ich auf Namespaces verzichtet und Klassen in Attribute (wie active, first) und Element (wie Slice, Button…) unterschieden.

Vielleicht kann Euch das als Anregung dienen. Klar entsteht da wieder das Problem der Abwärtskompatibilität zu alten Skins, aber imho ist ein Aufräumen hier bitter nötig.