@hedin83
хочу работать веб-разработчиком

Как организовать написание css?

Всем доброго времени суток. Верстаю уже года два, есть небольшое портфолио, много чего умею... но вот к чему я до сих пор не могу прийти, так это к организации своего CSS кода. У меня получается привязка к HTML структуре, т.е. вверху css начинаю c header и вниз до footer. Но мне это кажется не очень то современным и приспособленным к работе в команде.
Много читал про методологии организации кода вроде БЭМ, atomic CSS, SMACSS. Но никак я не могу в них вникнуть, как они все это разделяют. Много читал комментариев и смотрел чужой CSS в котором к примеру люди сначала описывают вид кнопок, задают переменными цвета...
Еще прочитал, что более правильно в css разделять оформление и расположение в стилях, т.е. color: ... отдельно, а position: ... отдельными классами.
Вобщем суть вопроса... Расскажите кто как пишет свой css?! Статьи, советы, комментарии, рекомендации.
Как приучить себя от привязки css к структуре html?!
  • Вопрос задан
  • 640 просмотров
Пригласить эксперта
Ответы на вопрос 2
sim3x
@sim3x
Много читал про методологии организации кода вроде БЭМ, atomic CSS, SMACSS. Но никак я не могу в них вникнуть, как они все это разделяют.

Приходит с опытом

Вкратце, придумывайте название класса для блока так, чтоб из названия было понятно, что он делает и не привязывайте название к позиции блока.

Для позиционирования, используйте отдельные классы в виде обертки или как дополнение к классу блока
Ответ написан
Вы не сможете отвязать код от структуры html, потому что они пишется под ваш документ. каким бы вы не хотели видеть "общим" свой код.

Можете верстать модульно (в общем-то БЭМ это и подразумевает), то есть у вас есть блок шапки - создаете что-то типа css/header/style.css , js/header/scripts.js и в них уже работаете.

По поводу кнопок. используя SASS вы и не сможете писать стили по-другому, как это делают другие люди:

1. пишется кнопка, .button
2. пишутся классы цветов.

На SCSS это выглядит примерно так:
.button {
	&__black {}
	&__white {}
}

Собственно у вас будет один код, который задает кнопку (отступы, шрифты и тд), а доп.классами вы описываете уже цвета кнопки, возможно, еще и размер, каким-нибудь .button__fullwidth.

Соответственно в такой манере пишутся и любые другие похожие блоки, после чего, если вам надо какой-то один поменять, вы добавляете ему дополнительный класс, в котором меняете, например, цвет текста и цвет фона.

Вообще говоря, я пишу код по-разному, в зависимости от сложности проекта. В проектах, где производится большое количество взаимодействий с пользователем - нужно писать дополнительные стили (стиль для успешной операции, для неуспешной, стили для ошибок, информационных полей и тд). Все они пишутся так, как описано в вашем примере с кнопками. Ведь вам достаточно поменять какой-то параметр в вашем описании кнопки и все, не придется менять это везде. Это удобно. Плюсом, я делю блоки на модули, где каждый файл подключается из отдельной папки. Это удобно для структуризации кода.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы