Share
Sună ca un oximoron sau cel puțin o imposibilitate, nu-i așa? Cum poate un limbaj static care este într-adevăr mai mult ca markup decât programarea să fie orientat pe obiecte? În acest tutorial, vă voi prezenta ideea de CSS orientat-obiect, vă va arăta cum funcționează și va încerca să vă convingă că ar trebui să o utilizați și ea!
Obiectul orientat spre CSS, la baza sa, este pur și simplu scris mai curat, USCATer CSS. Nu este un limbaj diferit: încă același CSS vechi știm și iubim cu toții. Este doar o schimbare de paradigmă. Într-adevăr, CSS orientat pe obiecte este o serie de modele simple și cele mai bune practici.
Deci, de ce o numim orientată pe obiect? Ei bine, potrivit Wikipedia,
Programarea orientată pe obiecte (OOP) este o paradigmă de programare care utilizează "obiecte" - structuri de date constând din câmpuri de date și metode - și interacțiunile lor pentru a proiecta aplicații și programe de calculator.
Dacă trebuia să re-scriem această definiție pentru CSS orientat pe obiecte, s-ar putea spune ceva de genul:
CSS orientat pe obiecte este o paradigmă de codare care modelează "obiecte" sau "module" - bucăți nesigure din HTML care definesc o secțiune a unei pagini web - cu stiluri robuste, reutilizabile.
Acest lucru înseamnă în principiu că aveți un "obiect" standard (o structură HTML). Apoi, aveți clase CSS pe care le aplicați obiectelor, care definesc designul și fluxul obiectului.
Confuz? Să arătăm un pic de teorie.
Există două principii principale [în CSS orientat pe obiecte]: primul este acela de a separa structura de piele, iar al doilea este de a separa containerul de conținut.
Citez Nicole Sullivan, al cărei capcana orientată spre obiecte este CSS. Deci, cum se joacă aceste două principii?
Separarea structurii de pe piele înseamnă că stilul de aspect și stilul de design sunt separate. O modalitate foarte practică de a face acest lucru este utilizarea unui sistem de rețea; există multe opțiuni sau puteți crea propriile dvs. Dacă nu utilizați un sistem de grilă, probabil veți defini doar structura obiectului principal de pe pagină; asta o să facem astăzi.
Separarea containerului de conținut înseamnă că orice obiect (containerul) ar trebui să poată să se adapteze pentru a accepta orice conținut; de exemplu, nu ar trebui nevoie pentru a avea un h3 în partea de sus, urmată de o listă neordonată pentru ca acesta să arate bine. Acest lucru permite flexibilitatea și reutilizarea, care este extrem de importantă.
Există câteva motive bune pentru care doriți să vă scrieți CSS într-un mod orientat pe obiecte. Unul dintre cele mai mari beneficii - și l-am menționat deja - este că CSS va fi mai reutilizabil. Dar foile de stil ar trebui să devină și mai mici. Obiectul orientat spre CSS ar trebui să ușureze modificarea designului unui site.
Scrierea stilului dvs. în acest mod vă poate oferi, de asemenea, liniștea minții: va fi mult mai ușor să schimbați părți din site-ul dvs. fără a sparge lucrurile. Obiectul-orientate CSS, de asemenea, vă permite să schimbați site-ul în mod constant.
Ei bine, dacă ați venit atât de departe, sunteți interesat Cum exact scrieți CSS cu o mentalitate orientată pe obiecte. Începem!
Primul pas este pregătirea pentru CSS: trebuie să determini obiectul HTML. În general, obiectul dvs. va avea un antet, un corp și un subsol, deși antetul și subsolul sunt opționale. Iată un obiect foarte simplu.
Înainte de a țipa "DIVITIS!" realizează că nu este așa de rău cum arată; Gandeste-te la asta:
Folosind HTML5, acum avem un obiect cu semnificație semantică și fără caracteristici asemănătoare supei. De fapt, acesta este obiectul pe care îl vom folosi azi.
Dacă vom scrie niște CSS, vom avea nevoie de ceva de stil, așa că să bifăm un șablon de bază: o pagină de start a blogului și o singură pagină de postare. Vom folosi câteva elemente HTML5 și un stil CSS3 astăzi!
CSS orientat pe obiecte CSS orientat pe obiecte
(într-adevăr, doar o grămadă de cele mai bune practici și modele, nu o limbă nouă)
10 septembrie 2009 Check out WorkAwesome!
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
7 septembrie 2009 Mesajul intro
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
5 septembrie 2009 Bine ati venit
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
Știu că este cam lung, deci este o diagramă a structurii noastre de bază:
Arată cunoscut? Acesta este obiectul nostru, cu o barieră adăugată pentru bara noastră laterală. Ne vom uita la pagina post unică mai târziu, dar hai să mergem în CSS chiar acum!
Veți observa că conectăm la trei foi de stil: reset.css, text.css și styles.css. Reset.css este resetarea lui Eric Meyer. Text.css este important: al doilea pas al CSS orientat-obiect este de a modela cateva elemente cheie de baza; de obicei, acestea sunt elemente de text, cum ar fi anteturile și listele. Styling aceste obiecte este importantă, deoarece determină aspectul consistent al site-ului; aceste elemente, în cea mai mare parte, nu vor primi niciun stil direct suplimentar.
Iată ce avem în text.css:
corp font: 13px / 1.6 Helvetica, Arial, FreeSans, sans-serif; h1, h2, h3, h4, h5, h6 culoare: # 333; h1 font-size: 50px; text-shadow: 1px 1px 0 #fff; font-family: arial negru, 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; articol, deoparte, dialog, figura, subsol, antet, hgroup, meniu, nav, secțiune display: bloc;
(Pălării de pe sistemul 960 Grid, al cărui fișier text.css este decupat.)
Acum vom începe să construim stiles.css; aici începe magia orientată spre obiect. Cu toate acestea, voi arunca mai întâi câteva stiluri de nivel superior, doar pentru a stabili un fundal corporal și câteva stiluri de link-uri și liste.
corp fundal: url (... /img/grad.jpg) repet-x # c0c0c0; / * Notă: toată imaginea va fi în codul sursă descărcat. * / a text-decoration: none; culoare: # 474747; padding: 1px; a: hover background: # db5500; Culoare: #fff; . selectat border-bottom: 1px solid # db5500; li padding-left: 15px; fundal: url (... /img/bullet.png) 0 5.9px no-repeat;
Prima noastră ordine de afaceri este de a defini structura paginii:
#container margin: 40px auto; lățime: 960 x; frontieră: 1px solid #ccc; fundal: #ececec; #container> header, #container> footer padding: 80px 80px 80px; lățime: 800px; overflow: ascuns; frontieră: 1px solid #ccc; lățimea graniței: 1px 0 1px 0; #container> header fundal: url (... /img/header.jpg) repeat-x # d9d9d7; #container> header li, #container> footer li float: left; umplutura: 0 5px 0 0; fundal: nici unul; #container> section background: #fdfdfd; umplutura: 0 40px 40px 80px; plutește la stânga; lățime: 493px; frontieră-dreapta: 1px solid #ccc; #container> deoparte padding-top: 20px; plutește la stânga; lățime: 346px; #container> subsol padding: 40px 80px 80px; fundal: #fcfcfc; #container> footer li: după content: "|" #container> footer li: ultimul-copil: după content: ""
Observați că modelați obiectul containerului prin pornirea tuturor selectorilor cu #container. Cu toate acestea, acesta este un caz special: de obicei, veți dori să utilizați clase, deoarece acestea sunt reutilizabile în mod liber.
Putem folosi selectorii de clasă pentru stilul nostru post:
.post overflow: vizibil; margin-top: 40px; .post> antet marja: 0 0 20px 0; Poziția: relativă; data postului padding: 2px 4px; fundal: # 474747; Culoare: #ececec; font-weight: bold; transforma: rotate (270deg); -moz-transform: rotate (270deg); -webkit-transform: rotate (270deg); Poziția: absolută; top: 60 px; stânga: -105.5px; .post img float: left; marja de-dreapta: 10px; .post.ext img float: dreapta; margine: 0 0 0 10px; foaterul postului overflow: hidden; .post footer li float: stânga; fundal: nici unul;
Să ne uităm la ceea ce face acest CSS orientat pe obiect. În primul rând, nu am limitat clasa la un anumit element; l-am putea adăuga la orice. Acest lucru ne oferă cea mai mare flexibilitate posibilă. Apoi, observați că nu am stabilit nici o înălțime sau lățime; care face parte din separarea structurii de piele; am scris deja stilul de stropire, astfel încât acest obiect va umple spațiul pe care structura îl oferă.
De asemenea, am desemnat toate elementele implicate într-un mod independent: elementele părinte nu necesită ca anumiți copii să aibă dreptate; deși avem elemente de copil, nu se va rupe nimic dacă nu sunt acolo. Iar elementele copilului nu sunt, în cea mai mare parte, dependente de părinții lor; Nu am desenat h2 într-un obiect post, deoarece ar trebui să fie consecvent pe întregul site; am avut deja grija de asta în text.css.
Există un alt bit important, partea care seamănă cel mai mult cu programarea orientată pe obiecte: clase extinse. Probabil ați văzut că avem stil pentru ambele .post img și .post.ext img. Sunt sigur că știi ce vor face, dar iată dovada:
Pur și simplu adăugând o altă clasă obiectului dvs., puteți schimba părțile minore ale aspectului și simțului; Ar trebui să menționez că Nicole Sullivan ar fi creat o clasă numită .postExt și apoi aplicată atât la obiect; Prefer să o fac în acest fel, deoarece îmi permite să folosesc același nume de clasă ("ext") pentru toate extensiile mele și cred că face HTML mai curat. Trebuie să vă amintiți să nu puneți un spațiu în selector; ".post .ext" va căuta un element din clasa ext interior un element în postul de clasă. Fără spațiu, va căuta un element în cele două clase.
Acum, când avem aria de conținut principală, să ne uităm la bara laterală. Avem două obiecte în bara laterală: o listă de arhive și o listă recentă de comentarii. Pentru început, vom crea o clasă .side-box pentru ei:
.side-box umplutură: 20px 80px 20px 40px; .side-box: nu (: ultimul-copil) border-bottom: 1px solid #ccc; .side-box> antetul h3 margin-bottom: 0; .side-box> antet p text-transform: majuscule; -Stil de font: italic; font-size: 90%;
Din nou, trebuie să țineți cont de faptul că avem grijă să respectăm cele două reguli: am separat structura de piele prin faptul că nu am setat înălțimea sau lățimea; obiectul curge pentru a umple orice spațiu de care are nevoie. Și am separat containerul de conținut prin faptul că nu facem elementele copilului necesare pentru un stil adecvat. Da, am ajustat stilul h3, ceea ce face ca acel aspect h3 să depindă de cutia laterală de clasă; în majoritatea cazurilor, asta e nedorit, dar în acest caz nu am făcut prea mult.
Dar să creăm o extensie pentru acest lucru; totuși, din moment ce dorim să facem o ajustare vizuală mare, nu vom extinde direct clasa side-box; vom crea o clasă nouă.
.pop-out> secțiune> * display: bloc; fundal: #fefefe; frontieră: 1px solid # 474747; padding: 20px; Poziția: relativă; lățime: 120%; stânga: 20px;
Deci ce face asta? Observați selectorul: direcționăm fiecare element direct în interiorul corpului obiectului nostru; când modelați un obiect, aplicați întotdeauna clasa la obiect în sine. Acest CSS va "arunca" conținutul în partea dreaptă.
"HEY, ai stabilit o lățime! Ce-i cu separarea struture de piele?" Am stabilit o lățime deoarece țintim elementele din interiorul corpului obiectului nostru; deoarece obiectul are o căptușeală, elementul interior este puțin îngust prin el însuși. Asta pare a fi o scuză pentru încălcarea regulii, dar nu cred că am încălcat regulile: am stabilit lățimea ca procent, care depinde încă de stilul structurii de mai sus în cascadă.
Iată cum arată asta.
Tocmai v-am spus că trebuie să aplicați întotdeauna clase la obiectele de nivel superior și să utilizați selectori pentru a modela elementele interioare. Dar o parte din CSS orientată pe obiect este capabilă să amestece și să se potrivească ușor cu stilurile. Este foarte posibil să doriți să utilizați un antet similar pe două obiecte care nu sunt într-adevăr legate în nici un fel. Este ideal să aveți o colecție de clase de antet și subsol pe care le aplicați direct în antetul sau subsolul unui obiect. În acest fel, nu adăugați un cod similar mai multor clase care nu sunt legate, ci scoateți-l afară și aplicându-l în locul respectiv. Să creăm un antet abstracționat.
Veți observa că am dat în antetul comentariilor noastre recente obiectul unei clase numite "post-it". Să creăm acea clasă acum.
.post-it graniță: 1px solid # db5500; padding: 10px; -Stil de font: italic; Poziția: relativă; fundal: # f2965c; Culoare: # 333; transforma: 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;
O aparenta slaba a unei note post-it!
Este important să subliniem că, deși intenționăm să folosim acest lucru pentru un antet, nu am specificat acest lucru în selector. Dacă acest lucru seamănă cu un aspect comun de design al site-ului nostru, s-ar putea să ajungem să ne dorim acest stil pentru altceva; de exemplu, l-am putea extinde cu clase care să ajusteze culoarea și rotația și să le folosească pe un perete sau pe o placă de bordură sau ceva similar.
Nu blocați selectorii; nu știi niciodată când vei dori acele stiluri!
Adesea, veți dori să o luați mai departe decât clasele de antet și subsol; o bibliotecă de componente este o parte imensă a CSS orientată pe obiecte; o regulă de bază ar putea fi aceasta: ori de câte ori doriți să aplicați același stil în mai multe locuri fără legătură, abstract. Desigur, ați putea găsi după ce ați codificat ceva într-un obiect că ar fi mai util dacă îl puteți folosi în altă parte; nu vă fie frică să refăctor. Este întotdeauna în beneficiul tău.
Veți vedea aceste componente în antetul paginii și în caseta de comentarii recentă.
.meta font-size: 75%; -Stil de font: italic; . subtitlu text-transform: majuscule; font-size: 90%; font-weight: bold; literă Spațiere: 1px; text-shadow: 1px 1px 0 #fff;
Ei bine, am terminat cu pagina noastră de index; să ne uităm la o orientare mai puțin orientată pe obiecte pe o singură pagină de postare. Doar copiați această pagină index, redenumiți-o "post.htm" și schimbați antetul paginii și secțiunea pentru acest cod.
CSS orientat pe obiecte
(într-adevăr, doar o grămadă de cele mai bune practici și modele, nu o limbă nouă)
10 septembrie 2009 Check out WorkAwesome!
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Faceți o altă operațiune în vehiculul de transport. Ut turpis diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi.
Comentarii
Primul-commenter
10 septembrie
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse quis urna dui,
Răspuns-commenter
12 septembrie
diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felin pulvinar
A doua-commenter
10 septembrie
tempor ut ut leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
Autorul
11 septembrie
diam, portitor un iaculis quis, bibendum non lectus. Nullam vitae erat un felin pulvinar
A patra-commenter
12 septembrie
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, comod în mi
Acum vedem unde vine o reutilizare; putem folosi clasa post pentru postarea blogului aici; aceasta este aceeași clasă de posturi pe care am folosit-o pentru pagina de pornire; pentru că nu am specificat structura, dar lăsăm obiectul să se extindă pentru a lua tot ceea ce îi dăm, se poate ocupa de întregul post.
Acum, să ne îndreptăm atenția asupra comentariilor de pe această pagină; comentariile sunt un loc minunat pentru a utiliza CSS orientat pe obiecte. Vom începe prin adăugarea următoarelor:
.comentariu border: 1px solid #ccc; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; padding: 10px; margine: 0 0 10px 0; .comment> header> p font-weight: bold; display: inline; margine: 0 10px 20px 0;
Acest lucru ne oferă doar câteva comentarii psuedo-atractive; dar putem face mai mult. HTML-ul nostru are clase pentru răspunsuri și comentarii de autor.
.answer.comment margine-stânga: 80px; .author.comment culoare: #ececec; fundal: # 474747;
Asigurați-vă că nu aveți un spațiu între cele două nume de clase. Acest lucru este un pic diferit de ceea ce am făcut mai devreme: în loc de a schimba stilul clasei de comentarii, îl extindem de fapt (poate că acestea sunt adevăratele clase extinse).
Și comentariile finalizate ...
Și în timp ce suntem aici, să adăugăm un formular de comentarii bibliotecii noastre componente.
.formulele de comentarii 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; lățime: 70px; vertical-align: top; .comments-form label: după content: ":"; .comments-form input [tip = text], .comments-form button, .comments-form textarea width: 200px; frontieră: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2px; .comments-form button [tip = trimite] margin-left: 70px;
Acest lucru ne oferă o formă frumoasă de colț rotunjit, cu un efect de mișcare moale.
Sunt cam sfâșiat aici; un concept fundamental al CSS orientat-obiect este abilitatea de a adăuga o clasă la diferite elemente; Dar ce se întâmplă în cazul ăsta? Această clasă ar fi practic inutilă pe orice altceva decât o formă; ar trebui sa schimbam selectorii in form.comments-form ca un fel de securitate? Tu ce crezi?
Ei bine, aceasta acoperă cu adevărat ideile de orientare obiect CSS.
Nu am folosit exemplul mesajului standard, dar este într-adevăr o modalitate excelentă de a intra în CSS orientat pe obiecte. Încercați să creați o clasă de mesaje pe care să o puteți aplica diferitelor elemente, cum ar fi un paragraf, un element de listă sau un obiect complet. Apoi, extindeți-l cu clase de eroare, avertizare și informații. Vedeți cât de flexibilă și reutilizabilă o puteți face.
Nu cred că răspunsul la această întrebare este un simplu "da" sau "nu"; probabil datorită faptului că CSS orientat pe obiecte nu este o limbă, ci o colecție de modele și bune practici. Este posibil să nu doriți întotdeauna să aplicați ideea obiectului HTML standard, dar majoritatea principiilor CSS sunt întotdeauna valide. Dacă vă gândiți la asta, veți vedea că este vorba de locul în care doriți să optimizați: ați putea codifica că sunteți HTML minimalist, cu câteva numere de identificare pentru mânere și că puteți să-l stilizați cu ușurință; dar CSS nu va fi reutilizabil, iar site-ul s-ar putea rupe mai târziu când veniți să schimbați lucrurile. Sau puteți scrie un HTML mai mult și optimiza CSS cu principiile pe care le-am uitat în acest tutorial.
Sunt dispus să-mi extind puțin codul HTML, astfel încât să pot scrie CSS care să fie reutilizabilă, flexibilă și uscată. Care este parerea ta?
Accentsconagua