Как правильно писать CSS код - 5 простых эффективных правил

Фотография к материалу: Как правильно писать CSS код - 5 простых эффективных правил
8
сентябрь
2017

Несколько простых правил, которые помогут избежать многих проблем при верстке.

1. Пишите добавляя новые правила а не отменяя старые

Это поможет избежать огромное количество лишнего кода и сделает описание более понятным.

Например если вы зададите для тега DIV отступ, то представляете сколько раз придется отменять его ниже каждый раз уточняя правила для нового элемента? Совершенно очевидно что отступ не будет у всех DIV одинаковым.

Задавать слишком подробные стили для общих элементов слишком опасно. В разных HTML элементах странное поведение стилей может всплыть в самых непредсказуемых местах.

2. Избегайте точных значений когда этого можно избежать

Старайтесь использовать процентные значения или множитель. При жестком задании значений, изменение одного значения может повлечь за собой множество других изменений. Например при правке CSS кода или динамическом изменении JavaScript.

К примеру рекомендуется так:

.dropdown {
top: 100%;
line-height: 1.5;
}

3. Избегайте лишних уточнений

Например, div.button{} лучше сократить до .button{}

Поскольку слишком специфичные селекторы снижают производительность, понимание кода, а также исключают повторное использование. Слишком подробные селекторы избыточны.

Также специфичным селектором является использование ID. Он хорошо подходит для JavaScript. Однако при создании больших проектов, это приводит к раздутию кода. Удерживайте спцифичность на как можно более низком уровне.

4. Используйте !important с умом

Обозначайте таким образом приоритет только в тех случаях, когда есть абсолютная уверенность в том что он необходим.

Иногда используют !important для решения проблемы. Однако истинную проблему это не решает, а откладывает ее и прячет на время. Лечите больного, а не болезнь или найдите корень проблемы, а не ее проявление. Следует разобраться в причинах иначе подобные "решения" ведут к тупиковым случаям, требующим глубокого рефакторинга.

5. Используйте понятные названия классов

Неясные названия классов не только сложны для понимания кода, но и могут по ошибке быть случайно переопределены. Все это создает путаницу.

Заключение

Конечно бывают исключения и частные случаи. Но они не должны становиться поводом к игнорированию этих простых правил, что нименуемо приведет к неуправляемому хаосу. В крупных проектах разница может быть особенно сильной. Надеемся, приведенные в этой статье правила сильно облегчат жизнь.

Комментарии отключены
Понимание flex или просто о непривычном
21
сентябрь
2017

FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.


Подробнее
Простые всплывающие по нажатию подсказки на JavaScript
6
октябрь
2017

Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.


Подробнее
Календарь для сайта с возможностью выбора даты
17
ноябрь
2017

Попробуйте простой для установки, удобный для использования, маленький по размеру, гибкий для настройки, но функциональный и совершенно бесплатный календарь.


Подробнее
Все статьи