Share
Det høres ut som en oxymoron, eller i det minste en umulighet, ikke sant? Hvordan kan et statisk språk som egentlig er mer som markering enn programmering være objektorientert? I denne veiledningen vil jeg introdusere deg til ideen om objektorientert CSS, vise deg hvordan det fungerer, og prøv å overbevise deg om at du skal bruke det også!
Objektorientert CSS, i kjernen, er bare å skrive renere, TØRKEer CSS. Det er ikke et annet språk: fortsatt den samme gamle CSS vi alle kjenner og elsker. Det er bare et paradigmeskift. Virkelig, objektorientert CSS er noen enkle mønstre og beste praksis.
Så hvorfor kalle det objektorientert? Vel, ifølge Wikipedia,
Objektorientert programmering (OOP) er et programmeringsparadigm som bruker "objekter" - datastrukturer som består av datafields og metoder - og deres interaksjoner med design av applikasjoner og dataprogrammer.
Hvis vi skulle skrive om den definisjonen for objektorienterte CSS, kan det si noe slikt:
Objektorientert CSS er et kodingsparadigm som stiler "objekter" eller "moduler" - nestbare biter av HTML som definerer en del av en nettside - med robuste, gjenbrukbare stiler.
Dette betyr i utgangspunktet at du har et standard "objekt" (en HTML-struktur). Deretter har du CSS-klasser som du søker på objekter som definerer design og flyt av objektet.
Forvirret? La oss se litt av teori.
Det er to hovedprinsipper [i objektorientert CSS]: den første er å skille strukturen fra huden og den andre er å skille beholderen fra innholdet.
Jeg citerer Nicole Sullivan, hvis brainchild objekt-orientert CSS er. Så hvordan spiller disse to prinsippene seg ut?
Å skille strukturen fra huden betyr at utformings styling og design styling er skilt. En veldig praktisk måte å gjøre dette på er å bruke et rutenett system; Det er mange alternativer, eller du kan lage din egen. Hvis du ikke bruker et rutenettsystem, vil du sannsynligvis bare definere strukturen på det primære objektet på siden din. det er det vi skal gjøre i dag.
Å skille beholderen fra innholdet betyr at ethvert objekt (beholderen) skal kunne tilpasse seg for å akseptere noe innhold; for eksempel bør det ikke trenge å ha en h3 på toppen, etterfulgt av en uordnet liste for at den skal se riktig ut. Dette tillater fleksibilitet og gjenbruk, noe som er viktigst.
Det er noen gode grunner til at du vil skrive CSS på en objektorientert måte. En av de største fordelene, og vi har allerede nevnt det, er at CSS-en din vil bli mer gjenbrukbar. Men stilarkene dine bør også bli mye mindre. Objektorientert CSS skal gjøre det lettere å endre utformingen av et nettsted.
Å skrive stilen din på denne måten kan også gi deg trygghet: det vil være mye lettere å endre deler av nettstedet ditt uten å bryte ting. Objektorientert CSS lar deg også endre nettstedet ditt konsekvent.
Vel, hvis du har kommet så langt, er du interessert i hvordan akkurat du skriver CSS med en objektorientert tenkemåte. Her går vi!
Det første trinnet er virkelig prep for CSS: du må bestemme HTML-objektet ditt. Vanligvis vil objektet ha en header, en kropp og en bunntekst, selv om topptekst og bunntekst er valgfritt. Her er et veldig grunnleggende objekt.
Før du skriker "DIVITIS!" innse at dette ikke er så ille som det ser ut; vurdere dette:
Ved å bruke HTML5 har vi nå et objekt med semantisk mening og ingen suppe-lignende egenskaper. Egentlig er dette objektet vi skal bruke i dag.
Hvis vi skal skrive noen CSS, trenger vi noe å style, så la oss piske opp en veldig grunnleggende mal: en bloggside og en enkelt innleggsside. Vi bruker noen HTML5-elementer og noen CSS3-stiler i dag!
Objektorientert CSS Objektorientert CSS
(egentlig bare en haug med beste praksis og mønstre, ikke et nytt språk)
10. september 2009 Sjekk ut WorkAwesome!
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
7. september 2009 Intro innlegget
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
5. september 2009 Velkommen
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
Jeg vet at det er litt langt, så her er et diagram over vår grunnleggende struktur:
Ser kjent ut? Det er vårt objekt, med et til side lagt til i vår sidefelt. Vi ser på enkelt innleggssiden litt senere, men la oss hoppe inn i noen CSS akkurat nå!
Du vil merke at vi knytter til tre stilark: reset.css, text.css og styles.css. Reset.css er Eric Meyers tilbakestilling. Text.css er viktig: det andre trinnet med objektorientert CSS er styling noen få viktige grunnelementer; Vanligvis er disse tekstelementer, som overskrifter og lister. Styling av disse objektene er viktig fordi den bestemmer den konsistente utseendet på nettstedet; disse elementene, for det meste, vil ikke motta ytterligere direkte styling.
Her er hva vi har i vår text.css:
kropp font: 13px / 1.6 Helvetica, Arial, FreeSans, sans-serif; h1, h2, h3, h4, h5, h6 farge: # 333; h1 font-size: 50px; tekstskygge: 1px 1px 0 #fff; font-familie: arial svart, arial h2 font-size: 23px; h3 font-size: 21px; h4 skriftstørrelse: 19px; h5 font-size: 17px; h6 font-size: 15px; p, h1, h2, h3, h4, h5, h6, ul margin-bunn: 20px; artikkel, til side, dialog, figur, bunntekst, header, hgroup, meny, nav, del display: block;
(Hatter av til 960 Grid System, hvis tekst.css-fil dette er spunnet av.)
Nå begynner vi å bygge styles.css; Det er her den objektorienterte magien begynner. Imidlertid vil jeg først kaste inn noen toppnivåer, bare for å angi en kroppsbakgrunn og noen linker og listestiler.
kropp bakgrunn: url (... /img/grad.jpg) repeat-x # c0c0c0; / * Merk: Alt bildet vil være i den nedlastbare kildekoden. * / a tekst-dekorasjon: ingen; color: # 474747; padding: 1 px; a: svever bakgrunn: # db5500; farge: #fff; .selected border-bottom: 1px solid # db5500; li polstring-venstre: 15px; bakgrunn: url (... /img/bullet.png) 0 5.9px no-repeat;
Vår første rekkefølge er å definere strukturen på siden:
#container margin: 40px auto; bredde: 960 x; grense: 1px solid #ccc; bakgrunn: #ececec; #container> header, #container> footer polstring: 80px 80px 80px; bredde: 800 ganger; flow: hidden; grense: 1px solid #ccc; kantbredde: 1px 0 1px 0; #container> header background: url (... /img/header.jpg) repeat-x # d9d9d7; #container> header li, #container> footer li float: left; polstring: 0 5px 0 0; bakgrunn: none; #container> seksjon bakgrunn: #fdfdfd; polstring: 0 40px 40px 80px; float: venstre; bredde: 493px; grense-høyre: 1px solid #ccc; #container> sideide padding-top: 20px; float: venstre; bredde: 346px; #container> footer polstring: 40px 80px 80px; bakgrunn: #fcfcfc; #container> footer li: etter content: "|" #container> footer li: siste barn: etter innhold: ""
Legg merke til at vi styler vårt beholderobjekt ved å starte alle våre selektorer med #container. Det er imidlertid et spesielt tilfelle: Vanligvis vil du bruke klasser, fordi de er fritt gjenbrukbare.
Vi kan bruke klassevalgere til vår stil:
.innlegg overløp: synlig; margin-top: 40px; .post> header margin: 0 0 20px 0; stilling: i forhold; .post .date padding: 2px 4px; bakgrunn: # 474747; farge: #ececec; font-vekt: bold; transform: roter (270deg); -moz-transform: roter (270deg); -webkit-transform: roter (270deg); stilling: absolutt; top: 60px; venstre: -105.5px; .post img float: left; margin-right: 10px; .post.ext img float: right; margin: 0 0 0 10px; .post footer overflow: hidden; .post footer li float: left; bakgrunn: none;
La oss se på hva som gjør denne CSS objektorienterte. For det første har vi ikke begrenset klassen til et bestemt element; vi kunne legge det til noe. Dette gir oss den mest fleksible muligheten. Legg merke til at vi ikke har satt noen høyder eller bredder; det er en del av å skille strukturen fra huden; Vi skrev allerede styrestyling, så dette objektet fyller uansett plass strukturen gir den.
Vi har også utformet alle elementene som er involvert på en uavhengig måte: foreldreelementene krever ikke at enkelte barn ser riktig ut; Selv om vi har stilige barnelementer, vil ingenting bryte hvis de ikke er der. Og barnelementene er for det meste ikke avhengige av foreldrene sine; Jeg har ikke stylet h2 i et innleggsobjekt, fordi det burde være konsekvent på tvers av siden; Vi har allerede tatt vare på det i text.css.
Det er en annen viktig del, den delen mest som objektorientert programmering: utvidede klasser. Du har sikkert sett at vi har styling for både .post img og .post.ext img. Jeg er sikker på at du vet hva de skal gjøre, men her er beviset:
Bare ved å legge til en annen klasse i objektet ditt, kan du endre mindre deler av utseendet og følelsen; Jeg skulle nevne at Nicole Sullivan ville ha opprettet en klasse som heter .postExt, og deretter brukt både på objektet; Jeg foretrekker å gjøre det på denne måten, fordi det tillater meg å bruke samme klasse navn ( "ext") for alle mine extensions, og jeg tror det gjør HTML utseende renere. Du må bare huske å ikke plassere en plass i velgeren; ".post .ext" vil se etter et element i klassen ext innsiden et element i klassepost. Uten plassen vil det se etter et element i begge klassene.
Nå som vi har hovedinnholdsområdet angitt, la oss se på sidefeltet. Vi har to objekter i sidefeltet: en arkivliste og en ny kommentarliste. For å begynne, lager vi en .side-boks klasse for dem:
.sideboks polstring: 20px 80px 20px 40px; .side-boks: ikke (: siste barn) border-bottom: 1px solid #ccc; .side-boks> header h3 margin-bottom: 0; .side-boks> header p text-transform: store bokstaver; font-style: italic; font-size: 90%;
Igjen bør du legge merke til at vi er forsiktig med å følge de to reglene: Vi har skilt strukturen fra huden ved ikke å sette høyde eller bredde; objektet flyter for å fylle alt det plassen det trenger å ta. Og vi har skilt beholder fra innhold ved ikke å lage barnelementer som kreves for riktig styling. Ja, jeg har justert h3 styling, noe som gjør at h3-serien er avhengig av klassens sidekasse; i de fleste tilfeller er det uønsket, men i dette tilfellet har jeg ikke gjort for mye.
Men la oss lage en forlengelse for dette; Men siden vi vil gjøre en stor visuell tilpasning, vil vi ikke utvide sidekasse klassen direkte; vi lager en ny klasse.
.pop-out> seksjon> * display: block; bakgrunn: #fefefe; grense: 1px solid # 474747; padding: 20 piksler; stilling: i forhold; bredde: 120%; venstre: 20px;
Så hva gjør dette? Legg merke til selektoren: Vi målretter hvert element direkte inn i kroppen av objektet vårt; Når du stiler en gjenstand, bruker du alltid klassen til selve objektet. Dette CSS vil "pop" innholdet ut til høyre.
"Hei, du setter en bredde! Hva med å skille strutur fra huden?" Jeg setter en bredde fordi vi målretter elementene inne i objektets kropp; Siden objektet har polstring, er det indre elementet litt smalt av seg selv. Det høres ut som en unnskyldning for å bryte regelen, men jeg tror ikke jeg virkelig brøt regelen: Jeg satt bredden i prosent, som fortsatt er avhengig av strukturen styling lenger opp i kaskade.
Her ser det ut som det ser ut.
Jeg fortalte deg bare at du alltid bør bruke klasser på toppnivåobjektene, og bruk barnselektorer til å forme de indre elementene. Men en del av objektorienterte CSS er i stand til å blande og matche stiler enkelt. Det er ganske mulig at du vil bruke en lignende overskrift på to objekter som ikke er relatert på noen måte. Det er ideelt å ha en samling av topptekst og bunntekstklasse som du søker direkte på overskriften eller bunnteksten til et objekt. På denne måten legger du ikke til lignende kode i flere ikke-relaterte klasser, men abstraherer det bort og bruker det på det aktuelle stedet. La oss lage en abstrakt overskrift.
Du vil legge merke til at vi ga overskriften til de siste kommentarene våre, objekt en klasse som heter "post-it". La oss lage den klassen nå.
.post-it border: 1px solid # db5500; polstring: 10px; font-style: italic; stilling: i forhold; bakgrunn: # f2965c; color: # 333; transform: roter (356deg); -moz-transform: roter (356deg); -webkit-transform: roter (356deg); z-indeks: 10; top: 10px; boks-skygge: 1px 1px 0px # 333; -moz-box-shadow: 1px 1px 0px # 333; -webkit-boks-skygge: 1px 1px 0px # 333;
En dårlig følelse av en post-it notat!
Det er viktig å understreke at selv om vi planlegger å bruke dette til en header, har vi ikke angitt det i selgeren. Hvis dette ligner et felles design aspekt av nettstedet vårt, kan vi ende opp med å ha denne stilen til noe annet; for eksempel kan vi forlenge den med klasser som justerer fargen og rotasjonen, og bruker dem på en vegg eller bulliten bord eller noe lignende.
Ikke lås ned dine selektorer; du vet aldri når du vil ha de stilene!
Ofte vil du ta det lengre enn bare topp- og bunntekstklasser; en komponentbibliotek er en stor del av objektorientert CSS; En grunnleggende regel kan være dette: Når du vil bruke samme stil på flere urelaterte steder, abstrakt. Selvfølgelig kan du etter hardkoding finne noe til et objekt som det ville være mer nyttig hvis du kunne bruke det andre steder; ikke vær redd for refactor. Det er alltid til din fordel.
Du ser disse komponentene i sidens overskrift og den nylige kommentarboksen.
.meta font-size: 75%; font-style: italic; .subtitle text-transform: store bokstaver; font-size: 90%; font-vekt: bold; brev-Avstand: 1px; tekstskygge: 1px 1px 0 #fff;
Vel, vi er ferdige med indekssiden vår; la oss se på litt mer objektorientert-ness på en enkelt innleggsside. Bare kopier den indekssiden, endre navn på "post.htm" og bytt ut sidens overskrift og seksjon for denne koden.
Objektorientert CSS
(egentlig bare en haug med beste praksis og mønstre, ikke et nytt språk)
10. september 2009 Sjekk ut WorkAwesome!
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui, ut tempus tortor. Alquam enim massa, porta en vehicula i, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi.
kommentarer
Første Commenter
10. september
Kjæresten er dum og sitter, og er en avgjørende forfatter. Suspendisse quis urna dui,
Svar-Commenter
12. september
diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar
Andre Commenter
10. september
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
Forfatteren
11. september
diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har et felis pulvinar
Fjerde Commenter
12. september
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi
Nå kan vi se hvor noen gjenbrukbarhet kommer inn; Vi kan bruke postklassen til blogginnleggingen her; Det er den samme postklassen vi brukte til hjemmesiden; fordi vi ikke spesifiserte strukturen, men la objektet ekspandere for å ta inn hva vi gir det, kan det håndtere hele innlegget.
La oss nå være oppmerksom på kommentarene på denne siden; kommentarer er et flott sted å bruke objektorientert CSS. Vi starter med å legge til dette:
.kommentere 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;
Dette alene gir oss noen psuedo-attraktive kommentarer; men vi kan gjøre mer. Vår HTML har klasser for svar og forfatterkommentarer.
.reply.comment margin-left: 80px; .author.comment color: #ececec; bakgrunn: # 474747;
Pass på at du ikke har plass mellom de to klassenavnene. Dette er litt annerledes enn det vi gjorde tidligere: i stedet for å endre stilingen av kommentaklassen, utvider vi faktisk det (så kanskje disse er de virkelige utvidede klassene).
Og de ferdige kommentarene ...
Og mens vi er her, la oss legge til et kommentarskjema til vårt komponentbibliotek.
.kommentarer-skjema p polstring: 5px; border-radius: 5 px; -moz-border-radius: 5 px; -webkit-border-radius: 5 px; .kommentarer-skjema p: svever bakgrunn: #ececec; .kommentar-formetikett display: inline-block; bredde: 70 piksler; vertical-align: top; .Comments-form label: etter content: ":"; . kommenter-skjemainngang [type = tekst], .kommentarer-skjema-knapp, .kommentarer-form tekstområde bredde: 200px; grense: 1px solid #ccc; border-radius: 5 px; -moz-border-radius: 5 px; -webkit-border-radius: 5 px; padding: 2 piksler; .kommentar-form-knappen [type = send inn] margin-left: 70px;
Dette gir oss en fin rundet hjørne form med en myk hover effekt.
Jeg er litt revet her; et grunnleggende konsept for objektorientert CSS er evnen til å legge til en klasse til forskjellige elementer; men hva med dette tilfellet? Denne klassen ville i utgangspunktet være ubrukelig på annet enn et skjema; bør vi endre selektorer til form.comments-form som en slags sikkerhet? Hva tror du?
Vel, det dekker virkelig ideene til objektorientert CSS.
Jeg brukte ikke standardmeldingseksemplet, men det er virkelig en fin måte å komme inn på objektorientert CSS. Prøv å opprette en meldingsklasse som du kan søke på forskjellige elementer, som et avsnitt, et listeelement eller et komplett objekt. Deretter skal du utvide den med feil, advarsel og info klasser. Se hvor fleksibel og gjenbrukbar du kan gjøre det.
Jeg tror ikke svaret på dette spørsmålet er et enkelt "ja" eller "nei"; Det er sannsynligvis fordi objektorientert CSS ikke er et språk, men en samling av mønstre og beste praksis. Du vil kanskje ikke alltid bruke ideen om standard HTML-objektet, men de fleste av CSS-prinsippene er alltid gyldige. Hvis du tenker på det, ser du at det egentlig handler om hvor du vil optimalisere: du kan kode du er HTML minimalistisk, med noen ids for håndtak, og kunne style det enkelt; men CSS vil ikke bli gjenbrukbart, og siden kan bryte senere når du kommer til å forandre ting. Eller du kan skrive litt mer HTML og optimalisere CSS med prinsippene vi har sett på i denne opplæringen.
Jeg er villig til å utvide HTML min litt, slik at jeg kan skrive CSS som er gjenbrukbart, fleksibelt og tørt. Hva er din mening?
Accentsconagua