Для получения полного доступа
зарегистрируйтесь.
Сниппет,  CSS

Создаём namespace для CSS


Как известно css страдает от нехватки Namespace. Классы забиваются только в глобальную область видимости, что соответственно рано или поздно приводит к конфликту имён. Реализуем пространства имён через префиксы. Они позволят нам определить тип класса/объекта.

l- layout. Используется для структурных объектов страницы. Это могут быть: шапка сайта, главное меню, футер, а также любые другие части, которые «вшиты» в шаблон страницы и имеют строго определённое место. Например, сайдбар будет иметь класс l-sidebar.

e- element. Любой выделенный элемент, повторяющийся на нескольких страницах. Это может быть кнопка, список тегов, социальные иконки, JS-плагины календарика, модальных окон, туллтипов и пр. Все они повторяются на нескольких страницах, на разных местах, в разных комбинациях. Например, e-submit кнопка отправки формы, или e-news-header скажет нам о том, что данный класс относится к заголовку новостей.

g- global. Такие префиксы даются «модифицирующим классам». То есть классам, которые навешиваются на любой объект на странице и модифицируют его. К таким классам можно отнести: g-clrfix, g-bold, g-inlineBlock и пр. Все они не являются самостоятельными элементами, а лишь изменяют свойства других объектов.

p- page. Данный префикс будет означать, что данный объект встречается только на одной странице (или группе однородных страниц одного раздела сайта) и не повторяется по всему сайту. Например, блок информации о пользователе и блок друзей встречаются только на странице профиля. Желательно такие классы хранить в отдельном CSS-файле.

j- javascript. Это единственный префикс, классы которого ни в коем случае нельзя стилизовать. Классы с данным префиксом используются только для доступа из JS: $loginForm.find(’.j-sendBtn’).

a- animation. Класс, который используется для анимации объекта. Например, a-fade-in говорит о том, что объект плавно появится на странице при помощи анимации. Или a-slide-up скажет нам о том, что объект появится снизу вверх ввиде анимации слайда.

Все префиксы легко запоминаются и не тормозят ход разработки. И пускай хотя бы не решают решение пространства имён в css полностью, но хотя бы частично заменяют его.

Todo
  html css

Автор


Gravatar image
Quberik
  • Репутация: 8
  • Сниппеты : 1
  • Ревизии : 0
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация