iam-css

Репозиторий предназначен для размещения

• документации по css-методологии (style guide) iam-css
• примеров вёрстки(возможно сравнительных с другими методологиями). Больше склоняюсь к использованию codepen.
• открытых обсуждений и ответов на ваши вопросы по iam-css в разделе issues на GitHub.

Вступление

Как и многие frontend-специалисты я столкнулся с необходимостью писать более управляемый CSS-код. Благодаря каскадированию стилей мы себе зачастую отстреливаем ногу, и для того, чтобы этого избежать, необходимо следовать какой-либо методологии.

Документация и примеры

Выложены на странице

История создания

• Посещение Яндекс-субботника и первые вопросы
• Оценка "жуткости" БЭМа
• Изучение других методологий с учётом современных тенденций (выход на AMCSS)
• Общение с апологетами БЭМа из команды Яндекса iam-css

Исходники

Cодержимое репозитория свободно для распростронения и изменения при указании сайта оригинального проекта — viT-1.github.io/iAMcss, и имени автора Пинчук Виталий

Полезные ссылки:

• TODO: Какие сложности доставляет каскад (статья на английском)

• Обзор CSS-методологий (видеолекция на русском, слайды)

• БЭМ, Виталий Харисов "Вёрстка независимыми блоками"

• BEViS

• MCSS (автор методологии рекомендует БЭМ)

• AMCSS

• GPS, автор Jeff Escalante (статья) с использованием новой (не поддерживаемой ie11) CSS возможности @layer при использовании которой становится возможным выставить приоритет селекторов вручную, без учёта их специфичности!

• Atomic BEM на основе Atomic Design но и автор Atomic Design тоже глупости порой делает

• Atomic CSS и его наследник Tailwind CSS (как по мне, так это сомнительный путь, но для препроцессоров такой подход годится)

• ITCSS вместе с БЭМ даёт BEMIT - тот же БЭМ, но с префиксами.

• AzaBEM

• OPOR

• FUN

• SMACSS (автор методологии рекомендует БЭМ)

• Keep your CSS selectors short

• CSS stats, инструмент для оценки стилей.

• CSS Guidelines

• Примеры вёрстки с упором на WAI-ARIA-атрибуты

• Рекомендации по рефакторингу эскалированной специфичности

• CSS selectors performance 2018

• Class vs data- attributes selectors performance

• JS performance of data-attributes

• What shouldn’t I use data attributes for?

• WHATWG html custom attribute naming conventions

• CSS properties inheritance

• CSS Custom Properties In The Cascade

• Theming with css-variables

• [disabled] or :disabled

Facepalm code

Vuetify v2.5.8:

// Needs increased specificity
  &.v-chip.v-chip
    background-color: transparent !important

MaterializeCSS 1.0.0
1:

.btn-flat.disabled, .btn-flat.btn-flat[disabled] {
  background-color: transparent !important;
  color: #b3b2b2 !important;
  cursor: default;
}

2:

.card .card-action
a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover {
  color: #ffd8a6;
}

UIkit v3.9.4

.uk-dotnav > * > * {
  display: block;

И все селекторы-модификаторы с !important

Bootstrap v5.1.3

@mixin visually-hidden() {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  ...

and all helpers after line 6573