objektum orientált css ii.

Ott tartottunk tehát, hogy összeraktuk az oldal vázát. Természetesen messze nem vagyunk még készen.

Következzenek az oldaldobozok.

Van két objektumunk, az archív lista és az utolsó kommentek listája. Kezdetnek hozzunk létre egy egységes oldaldoboz osztályt, legyen ez .side-box:

.side-box
  { padding: 20px 80px 20px 40px;
  }
  .side-box:not(:last-child)
    { border-bottom:1px solid #ccc;
    }
    .side-box > header h3
      { margin-bottom:0; 
      }
    .side-box > header p 
    { text-transform:uppercase;
      font-style:italic;
      font-size:90%;
    }
Látható, hogy ismét figyeltünk a két alapszabályunkra: elkülönítettük a struktúrát a dizájntól, azzal hogy nem foglalkoztunk konkrét megvalósítási beállításokkal, az objektumunk jelenleg a struktúra által meghatározott méreteket fogja követni. Ezen kívül elkülönítettük a tartalmat a konténertől is azáltal, hogy az oldaldobozok gyermek elemit opcionálissá tettük, azok nem szükségesek a doboz elfogadható kinézetéhez. A gyermek elemek ugyan kaptak némi igazítást, de a lehető legkisebb mértékűt, ami az elképzeld dizájnhoz szükséges.

sidebar

Mivel viszont elképzelhető, hogy máshol is az oldaldobozokhoz hasonló stílust szeretnénk adni az objektumunknak, ezért hozzunk létre egy kiterjesztést, egy új osztály formájában:

.pop-out > section > *
  { display:block;
    background:#fefefe;
    border:1px solid #474747;
    padding:20px;
    position:relative;
    width: 120%;
    left:20px;
  }

Szóval ez most mit is csinál? Kiválaszt minden elemet, ami egy .pop-out osztályú objektumunk section elemének közvetlen gyermeke és azokat ruházza fel apró stílusbeli jegyekkel, többek között jobbra tolja őket a rendes folyásukhoz képest 20 pixellel.

"Na de akkor most mégiscsak beállítottunk egy szélességet! Mi lesz a struktúra és a dizájn szétválasztásával?" A szélességet be kellett állítani, mert a megcélzott belső elemek túl közel lennének egymáshoz, mert az objektumunknak helykitöltést (padding) adtunk. Ez most kifogásnak hangzik a saját szabályaink megszegésére, de valójában az elem százalékbeli szélesség-értéket kapott, tehát továbbra is a objektumtól függ, amit pedig továbbra is a struktúra határozhat meg.

Így néz ki, amit most létrehoztunk:

popout

Azt mondtunk, hogy az osztályokat lehetőleg mindig felső-szintű objektumokra alkalmazzuk és használjunk gyerek-választó css szelektorokat, hogy ne kelljen figyelembe venni a gyerek-elemek konkrét megvalósítását. Az objektum-orientált CSS-nek ugyanakkor az is része, hogy könnyen lehessen stílusokat mixelni egymással. Például könnyen elképzelhető, hogy egy címsor stílust olyan objektumokon szeretnénk használni, amelyeknek nincs sok köze egymáshoz. Éppen emiatt érdemes létrehozni egy objektumokra húzható fejléc és lábléc kollekciót létrehozni és azokat közvetlenül a fejléc vagy lábléc elemre alkalmazni. Ezáltal nem kell egymáshoz nagyon hasonló kódot különböző osztályokhoz hozzáadni, ezáltal egyfelől kevesebb kódot kell létrehozni, könnyebb egyszerre módosítást végezni a hasonló stílusú objektumokon, ráadásul gyorsabb is lesz a stíluslapjaink betöltése és persze azzal együtt az oldalunké is. (Szerintem ráadásul ez a megoldás párhuzamba állítható az objektum-orientált programozás interfész fogalmával, miszerint hasonló funkcionalitást/megvalósítást kívánunk meg egymástól független osztályoktól/objektumoktól - Thoer)

Hozzunk létre egy absztrakt fejléc osztályt. Ahogy észre fogod venni, az utolsó kommentjeink fejlécének egy .post-it nevű fejléc-stílust adunk. A .post-it stílus így fog kinézni:

.post-it
  { border:1px solid #db5500;
    padding: 10px;
    font-style:italic;
    position:relative;
    background:#f2965c;
    color:#333;
    transform:rotate(356deg);
    -moz-transform:rotate(356deg);
    -webkit-transform:rotate(356deg);
    z-index:10;
    top:10px;
    box-shadow:1px 1px 0px #333;
    -moz-box-shadow:1px 1px 0px #333;
    -webkit-box-shadow:1px 1px 0px #333;
  }

 

postit

Érdemes megfigyelni, hogy habár ezt a post-it stílust mi kimondottan egy objektumunk fejlécére akarjuk alkalmazni, de a .post-it osztály megírásakor szándékosan figyelmen kívül hagytuk ezt a részletet. Ennek az az előnye, hogy így adott esetben más elemekre is lehet majd alkalmazni, akár egy lábléc is lehet post-it, de akár egy teljes objektum is. Adott esetben kiterjesztést is írhatunk majd hozzá, hogy teszem azt a .post-it.important osztály hátterének színe piros legyen.

Ne zárd be a szelektoraidat, sosem tudhatod, hogy mikor lehet szükséged azokra a stílusokra!

A komponens könyvtár az objektum-orientált CSS egy nagyon fontos része, egy általános alapszabály, hogy amikor hasonló stílusokat akarsz különböző helyen használni, akkor absztrahálni kell. Természetesen előfordul, hogy valamit már beleírtunk egy osztály leírásába, azt később szeretnénk újrahasznosítani, ilyenkor kénytelenek vagyunk némileg újraírni a kódot, mégis érdemes ezt azonnal megtenni, mert egy jól karbantartott kódon könnyebb és gyorsabb kisebb módosításokat gyakran elvégezni, mint egy átgondolatlan kódot karbantartani.

Ezeket a komponenseket az oldal fejlécben és az utolsó kommentek dobozában találod:

.meta
  { font-size:75%;
    font-style:italic;
  }
.subtitle
  { text-transform:uppercase;
    font-size:90%;
    font-weight:bold;
    letter-spacing:1px;
    text-shadow:1px 1px 0 #fff;
  }

 

Poszt belsőoldal

Nos, az index oldal kész van, nézzük mit találunk a megnyitott poszt oldalán. Csak duplikáljuk az index oldalt post.htm néven és cseréljük ki az oldal header és section részét ezzel a kóddal:

      <header>
        <h1>Object Oriented CSS</h1>
        <p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
        <nav>
          <ul>
             <li><a href="index.htm">Home</a></li>
             <li><a href="#" class="selected">Archives</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      <section>
        <article class="post">
          <header>
            <span class="date">September 10, 2009</span>
            <h2>Check out WorkAwesome!</h2>
          </header>
          <section>
            <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
          </section>
          <footer>
            <ul>
              <li><a href="#">Digg!</a></li>
              <li><a href="#">Share!</a></li>
              <li><a href="#">Like!</a></li>
            </ul>
          </footer>
        </article>
        <article class="comments">
          <header><h2>Comments</h2></header>
          <section>
            <article class="comment">
              <header><p>First-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
            </article>
            <article class="reply comment">
                  <header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
                  <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
                </article>
            <article class="comment">
              <header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
              <section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
            </article>
            <article class="author comment">
              <header><p>The author</p><p class="meta">Sept 11</p></header>
              <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
            </article>
            <article class="comment">
              <header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
              <section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
            </article>
          </section>

Látható, hogy rögtön értelmet nyertek az újrahasznosíthatóságért tett erőfeszítéseink. Csak hozzá kellett adni a post osztályt a blog-bejegyzésünk tartalmához és máris elvégeztük a munka nagyját.


Kommentek

Nézzük most a kommenteket, remek lehetőség az objektum-orientált CSS-ben való elmélyedésre. Előszöris adjuk hozzá ezt a kódot a stíluslapunkhoz:

.comment
  { border:1px solid #ccc;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    padding:10px;
    margin:0 0 10px 0;
  }
    .comment > header > p
      { font-weight:bold; 
        display:inline;
        margin:0 10px 20px 0;
      }

Ez önmagában ad egy kis stílust a hozzászólásainknak, de menjünk egy kicsit tovább. A HTML-ben vannak válasz-kommentek és szerzői-kommentjeink is.

.reply.comment
  { margin-left:80px;
  }
.author.comment
  { color:#ececec;
    background:#474747;
  }
Ahogy már korábban is jeleztem, most is figyelni kell, hogy a két osztály között ne legyen szóköz, az mást jelentene! Érdemes megfigyelni, hogy ez esetben, nem felülírjuk a .comment osztály egy-egy tulajdonságát, hanem hozzáadunk, ráadásul más-más tulajdonság-csoportot definiál a két kiterjesztés. (Ez többek között azért is érdekes, mert ezáltal úgy tudunk majd szerzői-válasz kommenteket létrehozni, hogy azt nem is definiáltuk külön. Bár ez véleményem szerint éles környezetben inkább a véletlen hozzáadott érték, mint az technika saját eredménye és következménye. - Thoer)

És akkor nézzük a kész kommenteket:

comments

Most, hogy ez megvan, adjunk hozzá egy komment-űrlapot a komponens könyvtárunkhoz:

.comments-form p
  { padding:5px;
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;
  }
.comments-form p:hover
  { background:#ececec; 
  }
.comments-form label
  { display:inline-block;
    width:70px;
    vertical-align:top; }
.comments-form label:after
  { content: " : ";
  }
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
  { width:200px;
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:2px;
  }
.comments-form button[type=submit]
  { margin-left:70px;
  }
Íme a frissen létrehozott űrlapunk, lekerekített sarkú beviteli mezőkkel és egy finom kis egér-érzékeny effekttel.

commentsform

Ebben az esetben némileg kétséges, hogy van-e értelme megtartani az objektum-orientált CSS fundamentális elképzelését, miszerint a stílusoknak függetlennek kell lennie az azt megvalósító elemektől, ugyanakkor ennek az osztálynak nincs sok értelme ha más elemekre alkalmazzuk, mint űrlapra. Felmerülhet a kérdés, hogy érdemes-e megváltoztatni az osztályt például form.comments-form-ra, amolyan biztonsági okokból. Mit gondoltok?

Nos, ezzel most már érintettünk mindent ami a témával kapcsolatos, plusz talán egy kicsit közelebb hoztuk a html5 és css3 vívmányait is az olvasóhoz.

Összefoglaló lépések az objektum-orientált css megvalósításához

  1. Határozd meg az alap-objektumodat.
  2. Használj egy általános nullázó stíluslapot (reset.css), állítsd be az alap elemek általános stílusait és az alap-objektumod stílusait.
  3. Adj osztályokat az objektumaidnak és komponenseidnek, hogy elérd a kívánt stílust és érzetet.

Nem hoztunk most létre egy standard üzenetet, de az például egy nagyszerű gyakorló-példa lehet bárkinek, aki szeretne megbarátkozni az objektum-orientált CSS-sel. Próbálj meg létrehozni egy üzenet osztályt, amit egyformán lehet bekezdésre (p) vagy listaelemre (li), vagy egy komplett objektumra alkalmazni.  Aztán ha megvan, terjeszd ki, hogy hiba, figyelmeztetés vagy hibakeresés üzeneteket is megkülönböztetve meg tudjon jeleníteni.

Mindig hasznos az objektum-orientált CSS?

A válasz nem lehet egyszerűen "igen" vagy "nem", valószínűleg azért nem, mert az objektum-orientált CSS nem egy nyelv, csupán stílusok és bejáratott praktikák egy közös elnevezése. Lehet, hogy a standardizált HTML objektumok alkalmazása/felépítése például egy-egy projektben nem megoldható vagy felesleges, ugyanakkor a CSS ajánlások nagy része valószínűleg akkor is igaz marad. Ugyanakkor bár elkezdheted a HTML-t minimalizált formában kódolni és néhány id és class segítségével gyorsabban összedobni a dizájnt, mint az objektum-orientált CSS esetében, de az egészen biztos, hogy sokkal nehezebb lesz módosítani azt vagy akár csak hozzáadni is. Ezzel szemben elkezdheted használni a fent vázolt ajánlásokat, amivel hosszabb idő lesz eredményt elérni, de mindig tudni fogod, hogy hova kell nyúlnod, ha módosítani akarsz valamit.

Én jobban szeretem a jól megtervezett, átlátható és módosítható megoldásokat. És Te?

Címkék: css html5 css3

A bejegyzés trackback címe:

https://szajtbilder.blog.hu/api/trackback/id/tr711417800

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.