objektum-orientált css i.

Úgy hangzik, mint egy oximoron vagy inkább badarság, nem igaz? Hogy lehetne egy statikus nyelv, ami inkább leírónyelv mint programnyelv objektum-orientált? A következő cikkben ebbe vezet be minket Andrew Burgess a NetTuts+ hasábjain. Aki szeretné letölteni a forráskódot, az az eredeti cikk mellett megtalálja.

Mi az az objektum-orientált CSS?

Az objektum-orientált css, alapvetően nem más mint egy tisztább, újrafelhasználhatóbb CSS. Ez nem egy új nyelv, "csupán" csak egy paradigma váltás. Valójában az objektum-orientált CSS néhány egyszerű minta és ajánlás.

Szóval akkor miért is objektum-orientált? Nos, a Wikipédián ez olvasható:

Az objektum-orientál programozás (OOP) egy programozói paradigma, ami "objektumokat" — adat struktúrákat, amik adatmezőkből és metódusokból épülnek fel — és azok kölcsönhatásait használja az alkalmazások és számítógépes programok megtervezéséhez.

(A fenti idézet az angol Wikipédia bejegyzés magyar fordítása - Thoer)

Ha ezt a definíciót át akarjuk írni CSS-re, akkor az a következőképp nézhetne ki:

Az objektum-orientált CSS az egy kódolási paradigma, ami "objektumokat" és "modulokat" - egymásba-ágyazható HTML kódrészletek, amik meghatározzák egy weboldal egy részét - ruház fel stílussal robusztus, újrafelhasználható stílusokkal.

Ez gyakorlatilag azt jelenti, hogy standardizáltuk az objektum fogalmat, ami a HTML struktúra, és vannak CSS osztályok, amiket az objektumainkra alkalmazunk és amik meghatározzák az objektumunk dizájnját és elrendezését.

Mi van a teória mögött?

Két fő alapelv van az objektum-orientált CSS mögött: az egyik a struktúra elkülönítése a dizájntól (szkintől) és a második a konténer elkülönítése a tartalomtól.

Ez az idézet Nicole Sullivantől van, aki az objektum-orientált CSS szülőanyja. Szóval, hogyan néznek ki ezek az alapelvek a megvalósítás szintjén?

A struktúra elkülönítése a dizájntól természetesen bármilyen módon megvalósítható, de érdemes valamilyen CSS keretrendszert használni hozzá. Több elterjedt rendszer létezik, de természetesen létrehozhatod a sajátodat is. Ha nem használsz keretrendszert, akkor valószínűleg az oldalad elsődleges objektum struktúráját határozod meg, mi is ezt fogjuk most tenni.

A konténer és a tartalom elkülönítése azt jelenti, hogy az objektumot (a konténert) fel kell készíteni mindenféle adat megjelenítésére. Például anélkül is megfelelően kell kinéznie, hogy kikötjük, hogy egy h3-as fejléc után egy rendezetlen lista lista lesz benne elhelyezve. Ez rugalmasságot és újrahasznosíthatóságot eredményez, ami tulajdonképpen maga a cél. Emellett a stíluslapjaid is kisebbé válnak és rendszerezettebbek lesznek. Ennek következménye, hogy egy későbbi dizájn módosítás vagy újrastrukturálás is könnyebb lesz.

Hogyan működik az objektum-orientált kódolás?

Az első lépés mindenképpen a HTML felkészítése. Általánosságban az objektumaidnak lesz egy fejléce, egy törzse és egy lábléce. Így néz ki egy alap-objektum:

<div class="object">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>

Mielőtt bárki rosszul lenne a sok div-től, jegyezzük, meg hogy ez csak a manapság elterjedt HTML4-ben néz ki ennyire csúnyán. HTML5-ben ez sokkal szemantikusabbnak tűnik:<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

Ebben a cikkben, többek között a jobb olvashatóság kedvéért, ezt a verziót fogjuk alkalmazni, ez lesz az objektumunk. Természetesen egy éles weboldal készítésekor mérlegelni kell a html5 használatának lehetőségeit és hátrányait is, legalábbis a cikk megírásakor és fordításakor még ez a helyzet.

Gyorsan állítsunk össze egy tesztoldalt, legyen egy blog kezdőoldala egy poszttal, mint tartalom. Vigyázat, mi most HTML5 és CSS3 markupot is használni fogunk, de az objektum-orientált CSS "hagyományos" eszközökkel is megvalósítható!

index.htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Object Oriented CSS</title>
    <!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!-- This makes IE recognize and use the HTML5 elements -->
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/text.css" />
    <link type="text/css" rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <article id="container">
      <header>
        <h1>Object Oriented CSS</h1>
        <h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
        <nav>
          <ul>
             <li><a href="index.htm" class="selected">Home</a></li>
             <li><a href="=post.htm">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><a href="post.htm">Check out WorkAwesome!</a></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>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
        <article class="post ext">
          <header>
            <span class="date">September 7, 2009</span>
            <h2>The Intro Post</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>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
        <article class="post">
          <header>
            <span class="date">September 5, 2009</span>
            <h2>Welcome</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>
          </section>
          <footer>
            <ul>
              <li><a href="#">Read More . . .</a></li>
              <li><a href="#">Retweet!</a></li>
              <li><a href="#">Comments (4)</a></li>
            </ul>
          </footer>
        </article>
      </section>
      <aside>
        <article class="side-box">
          <header>
            <h3>Archives</h3>
            <p>look into the past</p>
          </header>
          <section>
            <ul>
              <li><a href="#">August 2009</a></li>
              <li><a href="#">July 2009</a></li>
              <li><a href="#">June 2009</a></li>
              <li><a href="#">May 2009</a></li>
              <li><a href="#"> . . . </a></li>
            </ul>
          </section>
        </article>
        <article class="pop-out side-box">
          <header class="post-it">
            <h3>Recent Comments</h3>
            <p>see what folks are saying</p>
          </header>
          <section>
            <ul>
              <li>
                <p>I think oocss is really cool!</p>
                <p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
              </li>              
              <li>
                <p>Are you kidding? CSS can't ever be Object Oriented.</p>
                <p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
              </li>              
              <li>
                <p>Envato has done it again; workAwesome is simply awesome!</p>
                <p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
              </li>              
              <li>
                <p>I really like the site's desing; another work of art from Collis.</p>
                <p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
              </li>            
            </ul>
          </section>
        </article>
      </aside>

      <footer>
        <ul>
          <li>Standard</li>
          <li>Footer</li>
          <li>Information</li>
          <li>Yada</li>
          <li>Yada</li>
          <li>© 2009</li>
        </ul>
      </footer>

    </article>
  </body>
</html>

Grafikusan valahogy így fest a fenti kód doboz-modell szinten:

layout

Ismerős? Ez pontosan a mi objektumunk, csak a body két részre van osztva, a section és aside részekre. Mindjárt megnézzük a blogposztunkat is, de először nézzük meg a CSS-t.

Ha figyelmesen átolvastad a fenti html kódot, akkor észrevehetted, hogy három stylesheetet importáltunk be. Az első, a reset.css,h Eric Meyer reset stylesheetje. A második, a text.css fájl az objektum-orientált css egy fontos eleme, mely szerint az alapelemeket a designra vonatkozó stílusok előtt érdemes megadni. Ilyenek például a listák és fejléc elemek szövegre vonatkozó beállításai. Ezek a stílusok jó esetben az egész website részét képezik és egy konzisztens, átgondolt design benyomását keltik. Ezek az elemek általában aztán nem kapnak további stílust

A jelenlegi text.css-ünk a következő képpen néz ki:

body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
Az első ténylegesen a weboldalra vonatkozó feladatunk az alap struktúra felépítése:

#container                                   
  { margin:40px auto;
    width:960px;
    border:1px solid #ccc;
    background:#ececec;
  }
  #container > header, #container > footer                        
    { padding:80px 80px 80px;
      width:800px;
      overflow:hidden;
      border: 1px solid #ccc;
      border-width:1px 0 1px 0;
    }     
  #container > header                        
    { background:url(../img/header.jpg) repeat-x #d9d9d7;
    }
    #container > header li, #container > footer li
    { float:left;
      padding:0 5px 0 0;
      background:none;
    }
  #container > section                       
    { background:#fdfdfd;
      padding:0 40px 40px 80px;
      float:left;
      width:493px;
      border-right:1px solid #ccc;
    }
  #container > aside                         
    { padding-top:20px;
      float:left;
      width:346px;
    }
  #container > footer                        
  { padding:40px 80px 80px;
    background:#fcfcfc;
  }
    #container > footer li:after             
    { content:" |"
    }
      #container > footer li:last-child:after
      { content:""
      }

Nézzük mitől lesz ez a stíluslap objektum-orientált. Előszöris, nem limitáltuk az osztályunkat egy adott elemhez. Ezzel megvalósítottuk a lehető legnagyobb flexibilitást, bármilyen elemre rá lehet húzni a stílusunkat. Aztán észre kell még venni, hogy nem adtunk meg szélességeket és magasságokat ezzel segítve a struktúra és a design szétválasztását. 

Ezen kívül minden elemnek egy elem-független módon adtunk stílusjegyeket. A szülő elemek nem igénylik bármilyen gyerek-elem jelenlétét, habár adtunk a gyerek-elemeknek stílust, de semmi nem fog megváltozni, ha nincsenek gyerek-elemek. Így például a h2 elem nem kapott külön stílust a dobozunkban, mert annak illik konzisztensnek maradni az oldalon szereplő többi h2 elemmel, amit viszont már meghatároztunk a text.css fájlban.

Van még egy érdekes rész a kódban, ami talán a legjobban emlékeztet az objektum-orientált programozásra, ez pedig a kiterjesztett osztályok esete. Valószínűleg feltűnt, hogy mint a .post img mind a .post.ext img kiválasztók (avagy szelektorok) definiálva lettek. Valószínűleg tudod, hogy ezek hogy működnek, de minden esetre itt egy kép szemléltetésképpen:

postext

Szimplán azzal, hogy hozzáadunk még egy osztály az objektunkhoz, megváltoztathatunk kisebb stílusbeli sajátosságokat. Fontos, hogy a két osztály közé ne rakjunk szóközt, mert az mást jelent! A .post.ext img kiválasztó egy post és ext osztállyal is rendelkező elemben definiált képeket keres, a .post .ext img kiválasztó viszont egy post osztállyal rendelkező elemben definiált ext osztályú elemben keres img elemeket.

A váz tehát megvan, a folytatásban részletesen bemutatásra kerülnek az egyes oldalemek is.

Címkék: css html5 css3

A bejegyzés trackback címe:

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

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.

carstep 2009.10.05. 13:53:02

hali, "nem adtunk meg szélességeket és magasságokat" ebbol a szelesseg nem igaz, mert megadtal szelesseget tobb helyen is. :-)

carstep 2009.10.05. 13:56:18

".post img mind a .post.ext img" hat ezek a css jegyek lemaradtak a postrol! :-)