Как писать хороший и расширяемый css код?

Question

[Михаил Чеков]

Добрый день!

Подскажите, пожалуйста, ресурсы или книги, где можно узнать о том, как правильно писать расширяемый Css код, чтобы в случае чего можно было заменить/добавить какие-либо элементы, и все не сломалось?
Также интересует информация о правильном разбитие и подключении css файлов в случае, если проект разрастается и тд.

Буду очень благодарен =).

Comments

[posters]

Если в препроцессоры совсем не ногой, то SmartGrid от Дмитрия Лаврика может стать очень неплохим бустом. По сути это набор настраиваемых полезных примесей, которые упрощают адаптивную верстку с использованием препроцессоров.

[Сергей delphinpro]

Научиться структурировать код.
Научится делать максимально независимые блоки.
Освоить препроцессор, поможет в структурировании.
Почитать о существующих методологиях организации css кода.

[Сергей delphinpro]

И самое главное — дисциплина.
Мало написать "хороший" css. Обязательно нужно его поддерживать в таком состоянии. а это требует дополнительного времени и усилий.

Answer 1

[Anton]

Используйте Scss + переменные + формулы и все возможные продвинутые фичи + cборшик.
https://sass-lang.com/documentation/syntax

Вот крутой видос по теме: https://www.youtube.com/watch?v=Mrq2ora_p0o и крутой канал по верстке, там и бем видосы есть, но бем не панацея как по мне...

Мощь SASS/SCSS и владение сборкой, хотябы gulp в идеале webpack.

+ Уйма удобных плагинов для верстки и копирования кода для vscode
BEM Helper
eCSStractor for VSCode
Live Sass Compiler

Сейчас просто с космической скоростью можно работать с SASS/SCSS

Comments

[Михаил Чеков]

Большое спасибо, как раз вчера подписался на канал ).

Answer 2

[Хороший UI]

Добрый день, есть разные методологии. Ваш вопрос зависит так же от того, по какой методологии вы верстаете. Хорошо себя зарекомендовал БЭМ https://ru.bem.info/methodology/ + less (+ инструмент сборки webpack / gulp)

При данном подходе стили для каждого блока можно хранить в отдельном файле и далее экспортировать всё в общий. Так же можно отдельно хранить сторонние библиотеки, переменные, миксины и т.д, как в js :)

Вот как это примерно выглядит в рабочем проекте:

Comments

[Михаил Чеков]

Большое спасибо за ответ, всегда было интересно как на большом проекте все должно собираться. =)
Пробовал разбивать код в разные файлы, не совсем понял как правильно подключать media-queries, я подключал их отдельным файлом, но была проблема что они не срабатывали, на скриншоте такого файла отдельно не нашел, получается удобнее писать их сразу в одном файле с компонентом (т.е. например Header файл, а в нем обычные стили и media queries)?

[Хороший UI]

Да верно, медиа выражения в том же файле снизу. Это удобно)

[Дмитрий Беляев]

Хороший UI, Вам видимо ни разу не приходилось разбирать подобную кашу из стилей за другими людьми...

Answer 3

[Виталий Першин]

Присмотритесь к методологии БЭМ. По началу будет не просто, но потом познаете дзен.

Comments

[Владислав Лысков]

И какой же там дзэн? Имена классов на сотни символов?

[Виталий Першин]

Владислав Лысков, Если нет порядка в голове.

[Сергей delphinpro]

Владислав Лысков, вы явно его не постигли, тот самый дзен =)
БЭМ — это не столько про именование, сколько про организацию кода.

[Владислав Лысков]

Сергей delphinpro, возможно, но я и не пытался, я ознакомился с методологией, и она мне не понравилась в принципе

[Сергей delphinpro]

Владислав Лысков, Мне вот тоже недавно quasar сразу не понравился. Но тут на тостере его похвалили, в локальном чатике поспрашивал — похвалили. Внедрил в проект — оказалось удобная штука.
Это к теме про "не пытался" =)

[Владислав Лысков]

Сергей delphinpro, а мне он сразу понравился, мне колега на прошлой работе предложил на нем запилить новый проект на нём, я сначала сомневался, ибо кроме как от него, я о нём не слышал, запилили, остались довольны

[Сергей delphinpro]

Владислав Лысков, да, клевая вещь. Только с svg иконками геморрой, каждую отдельно импортировать и прописывать в data компонента.

[Дмитрий Беляев]

Виталий, Сергей delphinpro, я может тоже не познал дзен БЭМа, зато пару раз хлебнул горя и сорвал сроки разгребая кашу, наподобие той, что на скринах у Хороший UI в ответе. Пойди разбери к чему эти стили относятся, как их адекватно бить на чанки...
После разгребания этого всего и перехода на css-modules выходные стили не только стали биться на чанки, но и полегчали в сумме на несколько мегабайт, ибо были классы вида .some-wtf-block__some-wtf-element--some-wtf-modificator, а стали .dfs3f, а их в проекте были тысячи

[Сергей delphinpro]

Дмитрий Беляев, про несколько мегабайт вы ну ооооооочень сильно загнули =))
в остальном тоже перегибаете. так можно сравнить
.some-wtf-block__some-wtf-element--some-wtf-modificator {}
с
.some-wtf-class1 .some-wtf-class2 .some-wtf-class3 {}

чтобы понять к чему относится БЭМ класс, нужно просто на него взглянуть:
.app-header__logo {} — вполне очевидно, что это блок, содержащий логотип и расположенный в шапке сайта

Допускаю, что вам не повезло, и вы разгребали некое подобие БЭМа, написанное малоопытным человеком.

[Дмитрий Беляев]

Сергей delphinpro, нет, реально несколько мегабайт вышло тупо на манглинге имен классов

.some-wtf-class1 .some-wtf-class2 .some-wtf-class3 {}

тоже что-то из ряда вон выходящее, как раз говорящее о кривых ручках написавшего стили...

.app-header__logo {} — вполне очевидно, что это блок, содержащий логотип и расположенный в шапке сайта

может и очевидно, вот только где разметка и логика этого блока по прежнему неизвестно, как и наоборот, из разметки найти ее стили невозможно.
Ладно Ctrl+click Вы в моей IDE убили. Но и поиском воспользоваться нормально нельзя, ибо на деле это выглядит так:

.app-header {
  // лютая портянка стилей
  &__logo {}
  // лютая портянка стилей
}

[Сергей delphinpro]

Дмитрий Беляев,

Но и поиском воспользоваться нормально нельзя, ибо на деле это выглядит так:

Я уже сто раз отвечал на этот вопрос.
Элемент без блока не существует.
Каждый блок описан в своем файле.
Достаточно "контролкликнуть" по классу блока. и все мигом найдется. Равно как и выполнить поиск по имени блока, или поиск по имени файла в каталоге стилей. не придумывайте проблемы.
А если мы говорим о webstorm, то double-shift творит чудеса.

вот только где разметка и логика этого блока по прежнему неизвестно

тут я не уверен, что правильно все понял. Если речь идет о компонентном подходе, если мы пилим сайт на Вью или Реакте, то, конечно, нафиг нам там БЭМ.

лютая портянка стилей

А окно "Structure" для кого придумано в IDE?

тоже что-то из ряда вон выходящее, как раз говорящее о кривых ручках написавшего стили...

равно как и класс, приведенный вами в качестве примера.

Честно говоря, мне уже давно не интересны подобные дискуссии. Потому что аргументы у противника всегда одни и те же, проблемы всегда надуманные.

[Дмитрий Беляев]

Честно говоря, мне уже давно не интересны подобные дискуссии. Потому что аргументы у противника всегда одни и те же, проблемы всегда надуманные.

Сергей delphinpro, вот только эти "надуманные проблемы" из раза в раз встречаются в реальных проектах.
Проблема не в том, что БЭМ какой-то там плохой, в свое время он неплохо решал проблему конфликтов в css, так как инструментов для этого не было. Сейчас есть инструменты решающие эту проблему, и решают они ее определенно лучше, хотя бы по тому, что менее подвержены человеческому фактору. Но даже это не проблема, поле можно вспахать лопатой, если Вы боитесь использовать трактор.
Настоящая проблема в том, что новичку советуют непонятные три буквы, без объяснения что это такое. Притом если загуглить эти три буквы, то можно найти с десяток различных толкований. chekoff пришел с конкретным вопросом, как он может сделать свой код более поддерживаемым, но вместо этого получает маркетинг/религию/пропаганду идеи, бездумное использование которой приведет его ровно к обратному эффекту - неподдерживаемому нечто...

[Никита Михайлов]

Вот тут споры устроили. А ведь про самое главное забыли — методологии нужны для того, чтобы снизить специфичность. Это прям краеугольный камень. Поэтому такое сравнение некорректно:

так можно сравнить
.some-wtf-block__some-wtf-element--some-wtf-modificator {}
с
.some-wtf-class1 .some-wtf-class2 .some-wtf-class3 {}

Answer 4

[kocherman]

Здесь ты найдешь про CSS всё. А вот прочитать сможешь, если знаешь английский.

Answer 5

[Дмитрий Макаров]

Ещё как вариант посмотрите как устроено в других проектах в гитлабе. Исходники бутстрапа ангуляра

Answer 6

[Вова Дружаев]

БЭМ и css переменные.