Share
Det låter som en oxymoron, eller åtminstone en omöjlighet, eller hur? Hur kan ett statiskt språk som verkligen är mer som markup än programmering vara objektorienterad? I denna handledning ska jag presentera dig för idén om objektorienterad CSS, visa hur det fungerar och försök att övertyga dig om att du ska använda det också!
Objektorienterad CSS är i sin helhet helt enkelt renare, TORRer CSS. Det är inte ett annat språk: fortfarande samma gamla CSS vi alla vet och älskar. Det är bara ett paradigmskifte. Egentligen är objektorienterad CSS några enkla mönster och bästa praxis.
Så varför kallar den objektorienterad? Tja, enligt Wikipedia,
Objektorienterad programmering (OOP) är ett programmeringsparadigm som använder "objekt" - datastrukturer som består av datafields och metoder - och deras interaktioner med designapplikationer och datorprogram.
Om vi skulle skriva om den definitionen för objektorienterad CSS kan det säga något så här:
Objektorienterad CSS är ett kodningsparadigm som utformar "objekt" eller "moduler" -stabila bitar av HTML som definierar en sektion av en webbsida - med robusta, återanvändbara stilar.
Detta innebär i grunden att du har ett standard "objekt" (en HTML-struktur). Därefter har du CSS-klasser som du tillämpar på objekt, som definierar objektets design och flöde.
Förvirrad? Låt oss se lite teori.
Det finns två huvudprinciper [i objektorienterad CSS]: den första är att skilja strukturen från huden och den andra är att skilja behållaren från innehållet.
Jag citerar Nicole Sullivan, vars brainchild objektorienterade CSS är. Så hur spelar dessa två principer sig själva ut?
Att skilja strukturen från huden innebär att din layout styling och din design styling är separata. Ett mycket praktiskt sätt att göra detta är att använda ett nät system; det finns många alternativ, eller du kan skapa din egen. Om du inte använder ett nätverkssystem definierar du förmodligen bara strukturen på det primära objektet på din sida. det är vad vi ska göra idag.
Att skilja behållaren från innehållet innebär att varje föremål (behållaren) ska kunna anpassa sig för att acceptera något innehåll. till exempel, det borde det inte behöver att ha en h3 på toppen, följt av en oorderad lista för att den ska se rätt ut. Detta möjliggör flexibilitet och återanvändning, vilket är av största vikt.
Det finns några bra skäl till varför du vill skriva din CSS på ett objektorienterat sätt. En av de största fördelarna - och vi har redan nämnt det - är att din CSS kommer att bli mer återanvändbar. Men dina stylesheets bör också bli mycket mindre. Objektorienterad CSS ska göra det enklare att ändra utformningen av en webbplats.
Skriva din stil på detta sätt kan också ge dig lugn: det blir mycket lättare att byta delar av din webbplats utan att bryta saker. Objektorienterad CSS gör det också möjligt att ändra din webbplats konsekvent.
Tja, om du har kommit så långt, är du intresserad av på vilket sätt exakt du skriver CSS med ett objektorienterat tankesätt. Nu kör vi!
Det första steget är verkligen prep för CSS: du måste bestämma ditt HTML-objekt. Vanligtvis har ditt objekt en rubrik, en kropp och en sidfot, även om rubriken och sidfoten är valfria. Här är ett mycket grundläggande objekt.
Innan du skriker "DIVITIS!" inse att detta inte är så illa som det ser ut; överväga detta:
Med hjälp av HTML5 har vi nu ett objekt med semantisk mening och ingen soppliknande egenskaper. Det är faktiskt det objekt vi ska använda idag.
Om vi ska skriva några CSS behöver vi något att stila, så låt oss piska upp en mycket grundläggande mall: en blogghemsida och en enda inläggssida. Vi använder några HTML5-element och en del CSS3-styling idag!
Objektorienterad CSS Objektorienterad CSS
(egentligen bara en massa bra metoder och mönster, inte ett nytt språk)
10 september 2009 Kolla in WorkAwesome!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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 Posten
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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 Välkommen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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.
Jag vet att det är så länge, så här är ett diagram över vår grundläggande struktur:
Ser bekant ut? Det är vårt föremål, med en sida tillagd till vårt sidofält. Vi tittar på den enkla postsidan lite senare, men låt oss hoppa in i någon CSS just nu!
Du märker att vi länkar till tre stylesheets: reset.css, text.css och styles.css. Reset.css är Eric Meyers återställning. Text.css är viktigt: det andra steget i objektorienterad CSS utformar några viktiga grundläggande element; Vanligtvis är dessa textelement, som rubriker och listor. Att utforma dessa objekt är viktigt eftersom det bestämmer webbplatsens konsekventa utseende och känsla. Dessa element, för det mesta, kommer inte att få någon ytterligare direkt styling.
Här är vad vi har i vår text.css:
kropp font: 13px / 1.6 Helvetica, Arial, FreeSans, sans-serif; h1, h2, h3, h4, h5, h6 färg: # 333; h1 font-size: 50px; textskugga: 1px 1px 0 #fff; font-family: arial svart, arial h2 font-size: 23px; h3 font-size: 21px; h4 fontstorlek: 19px; h5 font-size: 17px; h6 font-size: 15px; p, h1, h2, h3, h4, h5, h6, ul margin-bottom: 20px; artikel, åt sidan, dialog, bild, sidfot, rubrik, hgroup, meny, nav, avsnitt display: block;
(Hats off till 960 Grid System, vars text.css-fil det här är spunnet av.)
Nu börjar vi bygga styles.css; Det är här den objektorienterade magiken börjar. Jag ska dock först kasta in några toppnivåer, bara för att ställa in en kroppsbakgrund och lite länk och liststilar.
kropp bakgrund: url (... /img/grad.jpg) repeat-x # c0c0c0; / * Obs! All bilden kommer att finnas i den nedladdningsbara källkoden. * / a text-decoration: none; color: # 474.747; padding: 1px; a: svever bakgrund: # db5500; färg: #fff; .selected border-bottom: 1px solid # db5500; li padding-left: 15px; bakgrund: url (... /img/bullet.png) 0 5.9px no-repeat;
Vår första affärsordning är att definiera sidans struktur:
#container margin: 40px auto; bredd: 960 x; gränsen: 1px solid #ccc; bakgrund: #ececec; #container> header, #container> footer padding: 80px 80px 80px; bredd: 800px; overflow: hidden; gränsen: 1px solid #ccc; kantbredd: 1px 0 1px 0; #container> header background: url (... /img/header.jpg) repeat-x # d9d9d7; #container> header li, #container> footer li float: left; vaddering: 0 5px 0 0; bakgrund: none; #container> avsnitt bakgrund: #fdfdfd; vaddering: 0 40px 40px 80px; flyta till vänster; bredd: 493px; gräns-höger: 1px solid #ccc; #container> åt sidan padding-top: 20px; flyta till vänster; bredd: 346px; #container> footer padding: 40px 80px 80px; bakgrund: #fcfcfc; #container> footer li: efter innehåll: "|" #container> footer li: sista barnet: efter innehåll: ""
Observera att vi utformar vårt behållarobjekt genom att starta alla våra väljare med #container. Det är dock ett speciellt fall: vanligtvis vill du använda klasser, eftersom de är fritt återanvändbara.
Vi kan använda klassväljare för vår stolpe:
.post översvämning: synlig; margin-top: 40 bildpunkter; .post> header margin: 0 0 20px 0; positioner: relativ; .post .date padding: 2px 4px; Bakgrund: # 474.747; färg: #ececec; font-weight: bold; transform: rotate (270deg); -moz-transform: rotate (270deg); -webkit-transform: rotate (270deg); position: absolute; top: 60 bildpunkter; vänster: -105.5px; .post img float: left; margin-höger: 10px; .post.ext img float: right; marginal: 0 0 0 10px; .post footer overflow: hidden; .post footer li float: left; bakgrund: none;
Låt oss titta på vad som gör denna CSS objektorienterad. För det första har vi inte begränsat klassen till ett visst element; vi kunde lägga till det till någonting. Detta ger oss den mest flexibla möjligheten. Lägg märke till att vi inte har satt några höjder eller bredder; Det är en del av att skilja strukturen från huden. Vi har redan skrivit styrplattformen, så det här objektet fyller det utrymme som strukturen ger det.
Vi har också utformat alla element som är inblandade på ett självständigt sätt: Föräldraelementen kräver inte att vissa barn ser rätt ut; Även om vi har stylade barnelement, kommer inget att bryta om de inte är där. Och barnelementen är för det mesta inte beroende av sina föräldrar; Jag har inte stylat h2 i ett postobjekt, eftersom det borde vara konsekvent över hela webbplatsen. Vi har redan tagit hand om det i text.css.
Det finns en annan viktig bit, den delen som mest objektorienterad programmering: utökade klasser. Du såg förmodligen att vi har styling för både .post img och .post.ext img. Jag är säker på att du vet vad de ska göra, men här är beviset:
Bara genom att lägga till en annan klass i ditt objekt kan du ändra mindre delar av utseendet och känslan. Jag borde nämna att Nicole Sullivan skulle ha skapat en klass som heter .postExt och appliceras sedan på objektet. Jag föredrar att göra det på så sätt, eftersom det tillåter mig att använda samma klassnamn ("ext") för alla mina tillägg, och jag tror att det gör HTML-seriet renare. Du måste bara komma ihåg att inte placera ett utrymme i väljaren; ".post .ext" letar efter ett element i klass ext inuti ett element i klasspost. Utan utrymmet kommer det att leta efter ett element i båda klasserna.
Nu när vi har huvudinnehållsområdet anges, låt oss titta på sidofältet. Vi har två objekt i sidofältet: en arkivlista och en ny kommentarlista. För att starta skapar vi en .side-box klass för dem:
.sidofält vaddering: 20px 80px 20px 40px; .sidan: inte (: sista barnet) gränsbotten: 1px solid #ccc; .side-box> header h3 margin-bottom: 0; .side-box> header p text-transform: uppercase; font-style: italic; font-size: 90%;
Återigen bör du notera att vi är noga med att följa de två reglerna: vi har separerat strukturen från huden genom att inte ställa in höjd eller bredd; objektet flyter för att fylla allt utrymme som den behöver ta. Och vi har separerat behållaren från innehåll genom att inte göra barnelement nödvändiga för korrekt styling. Ja, jag har justerat h3-styling, vilket gör att den specifika h3-looken är beroende av klassens sidofält. i de flesta fall är det oönskat, men i det här fallet har jag inte gjort för mycket.
Men låt oss skapa en förlängning för detta; Men eftersom vi vill göra en stor visuell justering kommer vi inte att utsträcka sidlådans klass direkt; vi ska skapa en ny klass.
.pop-out> avsnitt> * display: block; bakgrund: #fefefe; gräns: 1px fast # 474747; padding: 20px; positioner: relativ; bredd: 120%; vänster: 20px;
Så vad gör det här? Notera väljaren: Vi riktar in varje element direkt inuti vårt objekts kropp. När du stilar ett objekt, tillämpar du alltid klassen på själva objektet. Denna CSS kommer "pop" innehållet till höger.
"Hej, du satte en bredd! Vad sägs om att skilja strutur från huden?" Jag sätter en bredd eftersom vi riktar in elementen i vårt objekts kropp. Eftersom objektet har vaddering, är det inre elementet lite smalt i sig. Det låter som en ursäkt för att bryta regeln, men jag tror inte att jag verkligen bröt regimen: Jag ställde bredden i procent, vilket fortfarande beror på struktur styling längre upp i kaskaden.
Så här ser det ut.
Jag berättade precis för dig att du alltid ska tillämpa klasser på de översta objekten och använda barnväljare för att forma de inre elementen. Men en del av objektorienterad CSS kan enkelt mixa och matcha stilar. Det är ganska möjligt att du vill använda en liknande rubrik på två objekt som inte är relaterade på något sätt. Det är perfekt att ha en samling av rubriker för sidhuvud och sidfot som du direkt tillämpar på ett objekts rubrik eller sidfot. På så sätt lägger du inte till någon liknande kod i flera icke-relaterade klasser, men abstraherar bort det och tillämpar det på det relevanta stället. Låt oss skapa en abstraherad rubrik.
Du kommer märka att vi gav rubriken i våra senaste kommentarer objekt en klass som heter "post-it". Låt oss skapa den klassen nu.
.post-it border: 1px solid # db5500; vaddering: 10px; font-style: italic; positioner: relativ; Bakgrund: # f2965c; color: # 333; transform: rotate (356deg); -moz-transform: rotate (356deg); -webkit-transform: rotate (356deg); z-index: 10; top: 10px; boxskugga: 1px 1px 0px # 333; -moz-box-skugga: 1px 1px 0px # 333; -webkit-box-skugga: 1px 1px 0px # 333;
En dålig syn på en post-it-anteckning!
Det är viktigt att betona att även om vi planerar att använda detta för en rubrik, har vi inte angett det i väljaren. Om detta liknar en gemensam designaspekt på vår webbplats kan vi sluta vilja ha den här stilen för något annat; till exempel kan vi förlänga det med klasser som anpassar färg och rotation, och använder dem på en vägg eller bulliten board eller något liknande.
Lås inte ned dina väljare; du vet aldrig när du vill ha dessa stilar!
Ofta vill du ta det längre än bara rubrik och sidfot. ett komponentbibliotek är en stor del av objektorienterad CSS; en grundläggande regel kan vara detta: när du vill tillämpa samma stil på flera orelaterade platser, abstrakt. Naturligtvis kan du hitta efter att ha kodat någonting i ett objekt som det skulle vara mer användbart om du skulle kunna använda det någon annanstans; var inte rädd för refactor. Det är alltid till din fördel.
Du ser dessa komponenter i sidhuvudet och den senaste kommentarrutan.
.meta font-size: 75%; font-style: italic; .subtitle text-transform: store bokstäver; font-size: 90%; font-weight: bold; knipning: 1px; textskugga: 1px 1px 0 #fff;
Nå är vi färdiga med vår indexsida; låt oss titta på lite mer objektorienterad-ness på en enda postsida. Kopiera bara den indexsidan, byt namn på den 'post.htm' och byt ut sidhuvudet och avsnittet för den här koden.
Objektorienterad CSS
(egentligen bara en massa bra metoder och mönster, inte ett nytt språk)
10 september 2009 Kolla in WorkAwesome!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui ut tempus tortor. Alquam enim massa, porta en vehicula in, vehicula at lectus. Ut turpis diam, porttitor en iaculis quis, bibendum non lectus. Nullam vitae har en 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örsta commenter
Sept 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
Svar-commenter
Sept 12
diam, porträtt en iaculis quis, bibendum non lectus. Nullam vitae äter en felis pulvinar
Andra commenter
Sept 10
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
Författaren
11 september
diam, porträtt en iaculis quis, bibendum non lectus. Nullam vitae äter en felis pulvinar
Fjärde commenter
Sept 12
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, kommodo i mi
Nu kan vi se var någon återanvändning kommer in; vi kan använda postklassen för bloggpostningen här; Det är samma postklass som vi använde för hemsidan. Eftersom vi inte angav strukturen, men låt objektet expandera för att ta in vad vi än ger, kan det hantera hela inlägget.
Låt oss nu uppmärksamma kommentarerna på denna sida. kommentarer är ett bra ställe att använda objektorienterad CSS. Vi börjar med att lägga till följande:
.kommentera border: 1px solid #ccc; border-radius: 7PX; -moz-border-radius: 7PX; -webkit-border-radius: 7PX; padding: 10px; marginal: 0 0 10px 0; .comment> header> p font-weight: bold; display: inline; marginal: 0 10px 20px 0;
Detta ensam ger oss några psuedo-attraktiva kommentarer; men vi kan göra mer. Vår HTML har klasser för svar och författar kommentarer.
.reply.comment margin-left: 80px; .author.comment color: #ececec; Bakgrund: # 474.747;
Se till att du inte har ett mellanslag mellan de två klassnamnen. Det här är lite annorlunda än vad vi gjorde tidigare: istället för att ändra stilen på kommentarklassen utvidgar vi faktiskt det (så kanske det här är de riktiga utökade klasserna).
Och de färdiga kommentarerna ...
Och medan vi är här, låt oss lägga till ett formulär till vårt komponentbibliotek.
.kommentarer-formulär p vaddering: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; .kommentarer-formulär p: svävar (bakgrund: #ececec; .Comments-form label display: inline-block; bredd: 70 bildpunkter; vertikal-align: topp; .comments-form label: efter content: ":"; . kommentera-inmatning [typ = text], .kommentär-form-knapp, .kommentarer-form textarea bredd: 200px; gränsen: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2px; .Comments-form-knappen [typ = lämna in] margin-left: 70px;
Detta ger oss en fin rundformad form med en mjuk svängareffekt.
Jag är snällt sliten här; Ett grundläggande begrepp objektorienterad CSS är förmågan att lägga till en klass i olika delar; men hur är det med detta fall? Denna klass skulle i grunden vara värdelös på allt annat än en form; ska vi ändra selektorerna till form.comments-form som en slags säkerhet? Vad tror du?
Tja, det täcker verkligen idéerna om objektorienterad CSS.
Jag använde inte standardmeddelandet, men det är verkligen ett bra sätt att komma in i objektorienterad CSS. Prova att skapa en meddelandeklass som du kan ansöka om olika element, till exempel en paragraf, ett listobjekt eller ett komplett objekt. Utöka sedan det med fel, varning och info klasser. Se hur flexibelt och återanvändbart du kan göra det.
Jag tror inte att svaret på denna fråga är ett enkelt "ja" eller "nej"; Det är förmodligen därför att objektorienterad CSS inte är ett språk, utan en samling av mönster och bästa praxis. Du kanske inte alltid vill använda idén om standard HTML-objektet, men de flesta av CSS-principerna är alltid giltiga. Om du funderar på det ser du verkligen att du vill optimera: du kan koda att du är HTML minimalistiskt, med några ids för handtag, och kunna ställa det enkelt; men CSS kommer inte att återanvändas, och webbplatsen kan bryta senare när du kommer att ändra saker. Eller du kan skriva lite mer HTML och optimera CSS med de principer vi har tittat på i denna handledning.
Jag är villig att expandera min HTML lite så att jag kan skriva CSS som är återanvändbar, flexibel och DRY. Vad är din åsikt?
Accentsconagua