Ismerete objektum-orientált CSS (oocss)
Találkozott már a kifejezést: „tartalom - király”? Ha Ön webfejlesztő, és a munka gyakran társul a tartalom létrehozásában, amelyek ütköztek. Ez majdnem olyan alapvető szabály vonzza a látogatókat az oldalon.
Azonban néhány webfejlesztők támadhatják ezt az állítást az a tény, hogy a sebesség a fontos. És én, az úton, egyre több kezd tetszik ez ebből a szempontból. Az elmúlt években sok szakértő javasolt különböző módon, hogy növeljék a teljesítményt a weboldalak munka, amely kétségkívül vonzza az új célzott forgalmat.
Sajnos, a legtöbb fejlesztő dolgozik ezen a területen, hogy több figyelmet szentelt a teljesítménye j # 097; vascript és egyéb szempontok. szem előtt tartva a CSS.
Ma azt szeretnénk irányítani a figyelmet, csak a kihagyott szempont - Az objektum-orientált CSS, és azt is elárulják, hogy hogyan tud segíteni Önnek a termelékenység növelése és a képes fenntartani a weboldalakat.
Mint minden objektum-orientált kódolás, a cél az, OOCSS kódot azzal a képességgel, hogy újra használható, és képes megközelíteni olyan közel, mint sokoldalú és hatékony stíluslapok, amelyek sokkal könnyebben kezelhető és karbantartható.
Leírtak OOCSS wiki oldalt GitHub. OOCSS épül két alapelve.
Branch „bőr” a szerkezet
Szinte minden eleme a honlap létrehozását különböző vizuális tulajdonságait (azaz a „bőr”), amely lehet ismételni egy másik összefüggésben. Próbálja tükrözik a kialakulását a márka honlapján: színek, „light” használata árnyalatokkal, ami látható vagy láthatatlan határokat. Másrészt, ott is a láthatatlan tulajdonságait (azaz, szerkezet), amely szintén lehet ismételni.
Ha a különböző tulajdonságok vannak osztva modulok alapján osztályokba lehet őket használni többször, és akkor lehet alkalmazni, hogy minden elem, ami ugyanazt az eredményt. Hasonlítsuk össze néhány közülük akár kódot, és miután a kódot, így érthető, hogy mit beszélek.
Alkalmazása előtt OOCSS elveket, akkor nagyjából a CSS kód:
A fenti 3. pont egyedülálló funkció osztályok, és ők viszik fel választó azonosítót, amely meghatározza osztályok és amelyeket nem lehet újra felhasználni. De itt is láthatjuk, hogy több osztály ugyanaz közöttük. Alapvető stílusok lehet használni, mint márka, vagy más szóval, hogy hozzon létre egyfajta következetesség design.
Egy kis átgondolt tervezés és a szerkezet a stílusok, akkor elvont az alap stílus, hogy a CSS-kód végződött, mint ez:
Most az összes használt elemek osztályok, és az alapvető stílusok kombinációja egy „bőr” azzal a lehetőséggel, újrafelhasználás, és most nincs szükség, hogy újra használható kódrészletek felesleges stílusok. Csak meg kell, hogy alkalmazza a „bőr” osztály összes elemet, és ugyanazt az eredményt kapja elő az előző példában. Így tudjuk sokkal kevesebb kódot, és lehetősége van arra, hogy újra használni stílusokat.
A szétválasztás a konténerek és a tartalom
A második elv leírása a wiki a GitHub, ez áll a szétválasztása konténerek a tölteléket. Annak illusztrálására, hogy miért fontos, hogy vesszük a CSS a következő kódot:
Ezek a stílusok alkalmazható bármely harmadik szintű fejlécet, amelyek a gyermek elemek #sidebar elem. De mi van, ha szükségünk van, hogy ugyanazt a stílust a harmadik szintű címsor, hogy a pincében, kivéve szempontból a betűméret és a módosított szöveget árnyék?
Ebben az esetben, akkor tennie kell valamit, mint ez:
Vagy tudjuk fejezni valami kevésbé erős:
Most nem kell megismételni stílusok, és nem kell, hogy még gondolni rá. A OOCSS tudunk képzelni előre, hogy a teljes lehet a különböző elemeket, majd össze az ingatlan egy külön stíluslapot, amit aztán alkalmazni tetszőleges számú alkalommal.
Stílusok bejelentett a fenti példákban segítségével örökletes kiválasztó nem lehet újra felhasználni, mivel függ az adott tartály (ebben az esetben, mind az oldalsó panel és a pincében).
Ha alkalmazzuk a módszer létrehozása modulok révén osztályokba járó OOCSS, biztosak lehetünk abban, hogy a stílus függetlenek minden tartályba. Ez azt jelenti, hogy fel lehet használni bármely részén a dokumentumot, függetlenül szerkezetét.
Az élet példája
Tehát nézzük meg valamit, ami a legelején a fejlesztési stílusú kalap hely:
Íme néhány egyedi stílust kialakítva, hogy a .header-belső elem. Azonban, a többi képezhet egy egységet azzal a lehetőséggel, újrafelhasználás. Ie megvan a képessége, hogy absztrakt szerkezeti stílusok egy külön osztályt újrafelhasználásra. Ez az, amit kap eredményeként:
Stílusok tartozó .globalwidth osztály a következőket tartalmazza:
* Rögzített szélességű
* Középre használatával margin: auto
* Relatív helymeghatározás hogy hozzon létre egy helymeghatározó összefüggésben gyermek elemek
* 20 pixeles padding a bal és jobb oldali
* A túlfolyó lehetőség van egy rejtett érték, amely elkerüli a túlzott láthatóságát tartalom tartalom, amely túlmutat.
Most szabadok vagyunk, hogy ezeket a stílusokat minden elem, amely szükségessé tenné az ilyen paraméterek egyszerűen csatolva a kívánt osztály írása helyett, több sornyi CSS kódot.
Ami a helyszínen, már használják ezeket a szerkezeti stílusok elemei a fő tartalmát, hanem a belső elemek a pince. Attól függően, hogy a design, ezek a stílusok is alkalmazható a vízszintes navigáció, ami gyakran található a kupak helyét és tartalmát vagy bármely más elemet, amelyet meg kell középre az oldalon, és fix szélességű.
Hozzáadása után globalwidth stílusok ezekre az elemekre, a make-up kell kinéznie:
Lehet, hogy valaki úgy gondolja, hogy ez a fajta absztrakció vezet stílusok HTML kódot a rendetlenség, és ellentétes a strukturálása az oldalt.
De félretéve a vita a témában a hatása ennek a módszernek az elrendezés, nem valószínű, hogy valaki képes lesz kifogás, hogy ez a módszer a legkényelmesebb, és lehetővé teszi számunkra, hogy könnyen nyomon követheti a kívánt körzetszámot tartani őket naprakészen.
Az egyik úttörője OOCSS tekinthető Nicole Sullivan (Nicole Sullivan). Ő létrehozott egy modult a képességét, hogy újra használható néven Media Object. Neki köszönhető szerint neki, akkor mentse száz sornyi kódot.
Media Object - egy nagyszerű példája a hatalom OOCSS, hiszen állhat multimédiás elemek bármilyen méretben, és befogadni a tartalmat. Bár sok stílusok, amelyek vonatkoznak a tartalom benne (és még a méret a média elem) meg lehet változtatni a nagyon Media Object van alaptípus, amely segít elkerülni a felesleges ismétléseket.
Már említett néhány előnye OOCSS, de nézzük meg őket közelebbről.
Teljesítmény előnyeit elégnek kell lennie. Ha kevesebb lesz ismétlődő kód stílusok, illetve és az oldal mérete kisebb, így a gyorsabb betöltés meg.
Igaz, hogy a HTML-kód lesz egy kicsit „hit”, és ez növeli a méretét HTML-fájlokat, de a legtöbb esetben ezek a kis veszteséget ellensúlyozza termelékenységet lehet elérni az optimális stíluslapok.
Továbbá azt is kiemelni, hogy minden alkalommal, amikor újra egy bizonyos stílust, akkor is, hogy új design elemeket, így nem generál új sornyi kódot. A nagyobb projektek nagy forgalmat bonyolítanak le tud játszani kulcsfontosságú szerepet.
Style Sheets azzal a képességgel, hogy fenntartsák a relevancia
Mivel a OOCSS, akkor ahelyett, hogy az egyre növekvő dokumentum CSS állandó ellentmondások a szemantika egy praktikus modulkészlet, hogy lehet használni a kereslet.
Változtatások a már aktív weboldalt, akkor nem kell új stílust, hogy a végén a dokumentum CSS. Ehelyett, akkor újra használni a meglévő stílusok, és ki kell őket terjeszteni alapján már alkalmazó olyan szabályokat.
Ezzel a megközelítéssel, akkor képes lesz arra, hogy dolgozzon ki a teljes oldal segítségével könnyen csak egy kis részlet a CSS kódot. CSS meglévő modul alapjául szolgálhat minden új oldalak és új CSS-kód minimális lesz. Bizonyos esetekben, akkor is létrehozhat új, teljesen berendezett nélküli oldalak CSS-kód egy sorban.
Ezek az előnyök azt is lehetővé teszi, hogy bővítse a képességek vonatkozásában a lépcsőzetes. Mivel stílusok most moduláris, még az új fejlesztők lesz könnyű megérteni az oldalt szerkezetét.
Mit kell tudni
OOCSS szült nagy küzdelem a közösség, és a közös fejlesztés támogatói és ellenzői. Próbáljunk egy kicsit megérteni néhány alapvető félreértést.
Továbbra is használhatja az azonosító
Ha úgy dönt, hogy fordítson magam OOCSS, akkor a stílus a legtöbb fog alapulni CSS-osztályok, és akkor nem kell használni az azonosító.
Ez az oka annak, hogy sok hibát, amikor készült következtetések OOCSS kényszerít, hogy feladja az azonosítót. Ez a nézet téves.
Itt a szabály, hogy nem használja ID szelektor. Ie csak tökéletes, hogy akkor lehet alkalmazni, az elvek OOCSS (és elkerülni véve hajformázó használata ID szelektor), és ugyanabban az időben kell alkalmazni az azonosítót a HTML forrásban a j # 097; vascript vagy mint egy azonosító kód részleteket.
Persze, akkor találkoznak olyan helyzetben, ahol már alkalmazzák az elem azonosítóját, egyedi amiben hisz. Szóval, akkor megment egy pár byte hozzáadása nélkül egy osztály az elem. Ezért ahelyett, hogy a stílus azt fogja használni az azonosító választó. De még ebben a helyzetben lenne sokkal biztonságosabb támaszkodni az osztályban. Ez lehetővé teszi, hogy bízik abban, hogy nem lesz probléma a jövőben.
Munka kis projektek
A kis oldalak és alkalmazások, ott OOCSS természetesen szükségtelen lehet. Általában én nem ajánlom, hogy ezt a cikket, mint a modellé, mint OOCSS lehet, hogy nem lesz megfelelő függően az adott projektben.
Mindazonáltal úgy gondolom, itt az ideje, hogy legalább a minimális szinten kell gondolni OOCSS végrehajtják projektjeiket. Miután a mester ezt a technikát, biztos vagyok benne, akkor sokkal könnyebb dolgozni nagy komoly projektek, ahol a haszon az alkalmazás lesz nagyon észrevehető.
Egy kis alkalmazási útmutató
Sietek figyelmezteti, hogy meg lehet tölteni rengeteg időt, mielőtt képes lesz működni ügyesen OOCSS. Még mindig nem teljesen elsajátította, ezért vagyok valószínű, hogy képes válaszolni a kérdésekre ezen a területen.
De itt van, amit meg kell érteni a kezdetektől fogva. Ez segít, hogy csatlakozzon a munka OOCSS:
* Kerülje a választógombot lefelé (azaz ne használjon .sidebar h3)
* Ne használja az azonosítót stílus
* Ne rögzítse osztályok az elemek stíluslapok (azaz, ne használja, vagy div.header h1.title)
* Kivéve ritka esetekben ne használja! Fontos
* A CSS Lint CSS kódot ellenőrizni (és fel kell készülniük, hogy előre az őrült beállítások)
* A CSS rács
Természetesen lehetnek olyan esetek, amikor néhány ilyen szabályokat szükséges (vagy) megszakadt. De általában, minden tudás és készségek elviszi a következő fejlettségi szintjét.