CSS: CamelCase – отстой!

CSSЕсли ваш код чистый, понятный и последовательный, то вам не о чем беспокоиться. Но есть один очень противоречивый метод написания кода – camel case. И если вы его используете – эта статья для вас.

 

 

Синтаксис CSS использует дефисы и точки с запятыми

Синтаксис CSS использует дефисы и точки с запятыми. Это означает, что свойства пишутся так: font-size, line-height, border-bottom и т.п. Зачем тогда менять формат написания селекторов? Лучше писать все в одном стиле:

#example-style {
    font-size: 1.5em;
}

Не смешивайте различные методы написания кода!

 

Несоответствие ваших собственных правил

Camel case добавляет некоторое несоответствие в своих собственных правилах. Например:

#content {…}
#subContent {…}

Оба правила относятся к одному контейнеру, но один ссылается на content, а другой на Content.

wat?

 

Трудно читать

Camel case сложно читать. Отступы между словами делают фразы более разборчивыми. Мы не можем ставить пробелы в селекторах в CSS, но можем использовать дефисы. Сравните код ниже:

#someIdIMadeEarlier{
    font-size:2em;
}

#some-id-i-made-earlier{
    font-size:2em;
}

Я думаю, довольно трудно оспорить, что второй вариант просматривается намного легче.

 

Восприятие кода

Так же в коде очень важен уровень восприятия написанного, например:

 .navHome a { ... }
.navAbout a{ ... }
.navPortfolio a{ ... }
.navContact a{ ... }

.nav-home a { ... }
.nav-about a{ ... }
.nav-portfolio a{ ... }
.nav-contact a{ ... }

Второй вариант воспринимается легче благодаря хорошо выделяющемуся префиксу nav-.

 

С дефисами в текстовых редакторах работать удобней

Если мы написали длинное выражение с дефисами, то благодаря горячим клавишам Ctrl + Shift + [arrow key] в текстовых редакторах мы можем легко выделить кусок фразы между дефисами.

Если же мы будем использовать Camel case, то при использовании горячих клавиш будет выделяться вся фраза целиком.

 

Итог

Синтаксис языка CSS был принят уже давно. Так давайте придерживаться его!

 

 

Автор статьи: Alex. Категория: CSS
Наставник по HTML, CSS, JavaScript, PHP!
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft