Правила за писане на CSS

каскадни селектори

Всеки блок на страницата да бъде описан от селектор клас. Да не се използва каскадни селектори като те нарушават принципа на независимост на компонента. Същото правило се прилага за селектори пряк потомък (>) и съседния елемент (+).

Селектори държави (избрани. Active. Hover).
Контекст селектори. Има случаи, когато даден компонент се използва на различни страници или в друга среда. В този случай той е удобен за използване контекста на инструментите за избор. Важно е, че тези контекстуални стилове, съдържащи се в компонент родител.
Разпределение, в която не можете да променяте структурата на HTML-тагове.

именуване на класовете

имената на класовете са написани на английски език в малки букви. Ако не сте сигурни за правописа на думи на английски език, да го проверите в речника. PHPStorm има вградена проверка на правописа.
Желателно е, че терминологията в заглавието съвпадат имената на класа, която оперира на разработчика (имената на полетата в базата данни, името на PHP-класа).
За да се отдели думи в име, използвайте тире (-).
Създаване на CSS-селектори назоват най-информативен и разбираемо. Това ще помогне да се опрости развитие и отстраняване на грешки код. Чувствайте се свободни да се използва дълги имена на класове.
името на класа трябва да отразява същността на устройството, а не външния му вид.
Първата дума в името на името на модула клас трябва да отиде. На второ място - името на блока. Наименование на елемента може да се състои от няколко думи. Този формат, от една страна, в дясно показва принадлежността на стилове, а от друга - гарантира тяхната уникалност. Уникален стил гарантира независимостта на оформлението на компоненти.
Вложените елементи трябва да запазят контекст блок именуване. Блокът не е необходимо да бъде пряк родител елемент.

И двата варианта са валидни за именуване:

Инлайн стилове

селектор маркер, и селектор на атрибут

Избягвайте използването на имената на класовете на маркера за селектор и атрибута.

стенографски имоти

CSS предлага разнообразие от стенограмите (например, марж. Padding. Border, и други), които се препоръчва да се използва навсякъде, където е възможно, дори ако само един от посочените стойности. Използването на стенограмите свойства, полезни за по-голяма ефективност и по-добро разбиране на кода.

Съкратено форми за шрифт (шрифт) и фон (фон) могат да бъдат разделени на няколко свойства.

мерни единици

Използвайте стойностите в пиксели. Размери в пиксела. абсолютен, ясни, разбираеми и да не зависи от нищо. Допустимо използване проценти% навсякъде, с изключение на размера на текста (размер на шрифта).

0 и единици

Не уточни единица за измерване на нулеви стойности.

За да зададете елемент цветове, като използвате шестнадесетичен или RGBA (). Ако искате да зададете прозрачност. Да не се използва RGB () и горната част на делото в свойствата смисъла.

Избягвайте хакове в CSS-код. Ако все пак искате да се направи уникалните свойства на определен браузър, използвайте специални класове .bx-хром. .bx-огън. .bx-IE10.

правила групиране

Опитайте се да запазите селектори, които описват специфичен блок оформление, са в едно и също място и не са били разпръснати на CSS-файл.

Псевдо (: преди след това.)

Reset стилове (CSS Reset)

Да не се използва CSS Reset в оформлението. Компонентите са независими единици. Те не трябва да се отрази на CSS-правила, създадени за цялата страница. Това нарушава независимостта на устройството и го прави по-трудно да се използва повторно. Магистър нулират стилове реализирани с помощта на глобални CSS-правила, които в повечето случаи са написани на селекторите за маркер, което не е желателно да се използва оформление. В допълнение, пренастройване на стилове отразяват върху ефективността на визуализацията на страницата, и могат да попречат на оформлението на клиенти.

префикси на браузъра

Имоти без префикса винаги трябва да е в края.

Селектори състояния (избран, активно и висене)

Модифициращи класове се отнася за общите правила:

Приоритети и селектори! Важни

Избягвайте да използвате приоритет модификатор! Важно.

Шрифтове, връзки

За регистрация на текста, винаги уточни семейството шрифтове.