Отправляет email-рассылки с помощью сервиса Sendsay

Cssworld.ru

  Все выпуски  

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


Выпуск:  2 | 2017-09-22 | Cssworld.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее статью можно посмотреть здесь: http://cssworld.ru/post/73-kak-pravilno-pisat-css-kod-5-prostih-effektivnih-pravil

http://cssworld.ru/ | http://subscribe.ru/archive/comp.inet.cssworld/nav/prev//archive/comp.inet.cssworld/201709/22125727.html


В избранное