Руководство по стилю кода

• Пожалуйста, старайтесь, чтобы длина строки не превышала 80 символов.
• Предпочитайте ясность краткости при назывании чего-либо.
• Страницы заканчиваются на .html.haml, .html.erb, .html.md и т. д.
• Частичные файлы и макеты заканчиваются на .haml, .md, .erb и т. д.

Разметка permalinkРазметка

По большей части мы используем Haml и Markdown для написания разметки. Если вам нужно где угодно использовать обычный HTML, напишите HTML5, но отдавайте предпочтение строгому стилю XHTML:

• Используйте правильную разметку; элементы правильно вложены и не перекрываются.
• Пишите элементы и атрибуты в нижнем регистре.
• Цитируйте все атрибуты.
• Самозакрывающиеся пустые элементы с пробелом перед завершающей косой чертой (<hr />)

Стиль permalinkСтиль

Этот веб-сайт использует Sass в синтаксисе SCSS. Убедитесь, что вы используете классы, которые мы можем предложить, прежде чем что-то переписывать, если вы не можете обосновать иное.

• Для ясности используйте стиль о котором пишет Брэд Фрост:
  • Обратите внимание, что старые классы еще не используют этот стиль, но со временем мы будем проводить рефакторинг.
  • Используйте глобальное пространство имен sl-.
  • Используйте префиксы классов, сторонники Harry Roberts, хотя мы используем гораздо более простой набор:
  • c- для компонентов. Пример: sl-c-card.
  • l- для макетов. Пример: sl-l-grid.
  • is- and has- for states. Пример: sl-is-active.
  • js- предназначен для классов, специально созданных для таргетинга JavaScript. Пример: sl-js-toggle-navigation
  • Используйте синтаксис БЭМ.
  • Блок – общий компонентный объект. Пример: sl-c-card.
  • Элемент – любой дочерний элемент блока. Пример: sl-c-card__header.
  • Модификатор – любой вариант. Это можно поставить на блок. Пример: sl-c-card--primary. Его также можно поместить в элемент. Пример: sl-c-card__header--large.
• Держите классы как можно более плоскими и избегайте слишком глубокого вложения.
• Избегайте использования селекторов элементов, если только вы не используете утилиту-оболочку для нацеливания на все внутри (например, класс вокруг блока уценки или другого длинного текста, чтобы правильно стилизовать все его элементы). Это специально для случаев, когда нет смысла использовать классы. Будьте внимательны, когда делаете это. Мы можем дать вам обратную связь при проверке кода в подобных случаях.
• Для именования переменных, миксинов, селекторов-заполнителей или классов используйте подход от общего к конкретному. Смотрите эту статью для получения более подробной информации.
• Пишите селекторы через запятую на отдельных строках.