CSS: CamelCase – отстой!

наверх

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

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

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

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

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

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

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

#content {…}
#subContent {…}

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

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

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, то при использовании горячих клавиш будет выделяться вся фраза целиком.