Всеки frontendschik пише, CSS. А CSS, както знаете има много въпроси, които бихме искали да се реши.
Задача №1: Всички стилове в CSS глобални. Ако декларирате клас .container с някакъв вид имоти и Питър направи утре по вашия проект е една и съща, това, което стиловете? Или си Петя? Естествено, глобалната стил е лошо и хората идват с патерици под формата на ВЕМА, например. Кой е работил с BEM - това е, когато създавате всеки клас на такава .authentication всички деца класове инвестират стилове вътре с удостоверяване префикс. Оказва се, нещо като уникален компонент, който може да бъде reyuzat. Това е чудесен патерица, който служи и като методология, която трябва да бъде проучен. Всички стилове с BEM и са глобални и могат да бъдат обезсилени. Ние искаме да пишат класове и не мисля, че те може да се повтори, тъй като трябва да бъде уникален.
Проблем №2: Ние сме yelement които е предписано някои стилове. И искаме другаде в стиловете на блока. Обикновено хората слагат yelement които искат да се предефинира стила на различен елемент и като тегло селектор става по-голяма, стиловете имат преимущество. В голям проект е малко подобен на кратък код. Ние искаме да се предефинира стила не можеше CSS, и преди CSS sbildilsya. Това е към страница в CSS видяхме ясен и стегнат код, без изключения.
Проблем №3: Ние искаме да се отървем от по-важно веднъж завинаги.
Афродита използвам библиотеката, която беше създадена в Кан академия, както и че работи добре като свободен реагират и да реагира.
Така че аз имам един проект, който аз, генерирани с помощта на създаване на реакция-ап.
Нека да зададете Афродита.
Сега внасяме функция от CSS Афродита.
Всички наши App от стиловете ще имате AppStyles файл. Нека да импортирате и добавете контейнер стилове клас.
Всички стилове, които са написани с тире ще бъдат записани camelCase и всички стойности в реда. Тъй като в момента е да се използва този клас контейнер компонент в приложението?
Ние просто преминават CSS име на класа функция с опцията за клас, който искате да приложите.
Нека да погледнем на браузъра, че ни е останало. Както можем да видим, нашата прилага стила. Нашата контейнер в момента е уникална, тъй като тя е добавен в генерирания наставка. Сега, дори и ако някой използва другаде контейнер клас, той също ще бъде уникален. Но защо ни стил е написано важно? Защото за по-лесен преход към Афродита с един проект, който е написан по обичайния CSS всички имоти се добавят автоматично към важната. Няма нищо лошо в това, защото той току-що направихте, за да замени CSS стилове, но нека всичко да се премахне едно и също, защото имаме нов проект и ние нямаме нужда от него
За да направите това, вместо просто да се импортира от Афродита, които внасяме от Афродита / не-важно
Както видяхме, е важно да се почистват. Всички стилове, които пишат, се добавят към главата, но без интервали, така че натоварването на страницата по-бързо.
Какво друго ни дава Афродита? Например autoprefixer. Нека се опитаме. Нека добавим нашия дисплей клас контейнер: огъва
В браузъра, виждаме, че стиловете веднага генерират префикс за всички браузъри.
Какво ще кажете за reyuza на класове, без никакви проблеми, които имаме в CSS? Да се създаде черен квадрат, което ние reyuzat на различни места с различни размери.
Нека създадем squareStyles файл, който ще бъде нашата обща клас.
Това е един обикновен обект с стиловете. Нищо повече. Дори Афродита не сме използвали. Сега нека да го установят в рамките на приложението.
Ние просто още един клас от стиловете на приложения.
Сега нека да импортирате стиловете App blackSquare и се смесват с всички стилове на blackSquare от разпространението на ES7.
Ако погледнем към браузъра, след това ни изведе черен квадрат. Сега си представете, че на всички места, които трябва да го 100x100, а именно App 50x50.
Нека просто ще блокира стилове на площада.
В браузъра, виждаме, че ширината и височината на площада се промени. Нека да погледнем в стиловете. От всички стилове ние сме създадени, в браузъра, ние виждаме само получените стилове. Това означава, че ширината и височината се настройва само 1 път. Не са припокриващи стилове 20 пъти с различно тегло от селектори. Само един уникален стил.
Свързани статии