Reagál - írja css javascript
Minden frontendschik napi írja CSS. A CSS, mint tudjuk egy csomó kérdés, hogy szeretnénk megoldani.
Probléma №1: Minden stílus a CSS globális. Ha kijelentik osztály .container valamilyen tulajdonságok és Peter tett holnap a projekt ugyanaz, milyen stílust alkalmazunk? Vagy a Petya? Természetesen a globális stílus rossz, és az emberek jönnek össze mankó formájában BEMA, például. Ki dolgozott BEM - ez az, amikor teremt osztálya az ilyen .authentication minden gyermek osztályok fektetnek stílusok belső hitelesítési előtagot. Kiderült, egyfajta különleges komponens lehet reyuzat. Ez egy nagy mankó, ami egyben egy olyan módszert, meg kell vizsgálni. Minden stílus BEM és a globális és felül lehet bírálni. Akarunk írni osztályok, és nem hiszem, hogy meg lehet ismételni, mert egyedinek kell lennie.
Probléma №2: Azt yelement aki felírt néhány stílus. És azt akarjuk, máshol a blokk stílus. Általában az emberek fel yelement, amit szeretnének, hogy újra a stílust egy másik elem, és a választó tömeg nagyobb lesz, akkor a stílusok manipulálhatók. Egy nagy projekt ez valamivel hasonló a tömör kódot. Azt akarjuk, hogy újra a stílus nem tudott css, és még mielőtt a CSS sbildilsya. Ez egy oldal css láttuk világos és tömör kód nélkül felülbírálja.
Probléma №3: Szeretnénk megszabadulni a fontos, egyszer és mindenkorra.
Aphrodite azt használja a könyvtárat, amely azért jött létre, a Khan Academy, és jól működik, mint egy szabad reagálnak, és reagálni.
Szóval van egy projekt, amit hoztunk létre a create-reagálnak-alkalmazást.
Állítsunk Aphrodité.
Most importálni funkciót css Aphrodité.
Minden App stílusok fogunk tartani AppStyles fájlt. Nézzük import és adjunk hozzá egy StyleSheet osztály tartályba.
Minden stílus, ami meg van írva egy kötőjel lesz írva teveEsetnek, és minden érték vonalak. Mivel most már használni ezt az osztályt konténer komponensnek az App?
Egyszerűen át css className funkciót az osztály lehetőség, hogy az alkalmazni kívánt.
Nézzük meg a böngészőnek, hogy mi maradt. Ahogy meglátjuk mi alkalmazni a stílust. A tartály most különleges, mert adunk a keletkezett utótagot. Most, még ha máshol valaki használja konténer osztály, akkor is egyedi lesz. De miért a mi stílusunk van írva fontos? Mivel egy könnyebb átmenet Aphrodité egy projekt, amely meg van írva a szokásos css összes tulajdonságok automatikusan hozzáadódik a fontos. Nincs semmi baj, mert csak tette, hogy felülbírálja a CSS stílusokat, de nézzük el minden ugyanaz, mert van egy új projekt, és nem kell, hogy
Ehhez helyett csak importálás aphrodite importálunk Aphrodite / nem fontos
Mint láttuk, fontos, hogy tiszta. Minden stílus, hogy írunk adunk a fejét, de szóköz nélkül, úgy, hogy a lap betöltése gyorsabb.
Mi mást ad nekünk Aphrodite? Például autoprefixer. Próbáljuk. Adjuk hozzá az osztály tartály kijelző: flex
A böngészőben azt látjuk, hogy a stílusok azonnal létrehoz egy előtag minden böngészőben.
Mi a helyzet reyuza osztályok minden gond nélkül, amely már a CSS? Hozzunk létre egy fekete négyzet, amit reyuzat különböző helyeken, különböző méretekben.
Hozzunk létre squareStyles fájl lesz a mi közös osztályban.
Ez egy egyszerű objektumot a stílus. Semmi több. Még aphrodite nem használtuk. Most nézzük levezetni azt a kb.
Csak még egy osztályt az App stílusokat.
Most importálja az App blackSquare stílusok, és keverjük össze az összes stílus blackSquare egy terjedését ES7.
Ha megnézzük, hogy a böngészőt, majd hozott ki minket egy fekete négyzet. Most képzeljük el, hogy minden helyen, hogy szükségünk van rá 100x100, azaz App 50x50.
Nézzük csak blokkolja stílusok a téren.
A böngészőben azt látjuk, hogy a szélessége és magassága a tér megváltozott. Vessünk egy pillantást a stílus. Mivel az összes stílus hoztunk létre, a böngésző, azt látjuk, csak a kapott stílusokat. Azaz, a szélesség és a magasság beállítása csak 1 alkalommal. Nem átfedő stílusok 20 alkalommal különböző tömeg kiválasztó. Csak egy egyedi stílusát.