8 советов по организации CSS
После написания Сравнение стилей кода CSS и решение, что лучше всего, я понял, что чего-то не хватает. Вот почему я пишу несколько советов, как аккуратно сформировать ваш CSS:
1) Всегда используйте SASS (или любой препроцессор CSS)
Если возможно, используйте SASS. У него есть потрясающие функции, такие как вложение, объявления переменных и миксины. Вы можете использовать вложение для разделения таких вещей, как: ваши компоненты, переменные для ваших цветов и миксины, чтобы избежать этих ужасных свойств, зависящих от браузера. (В Bourbon есть множество примесей, которые вы можете использовать).
2) Напишите HTML-код перед CSS.
Это поможет вам определить скелет вашей страницы перед нанесением макияжа. Вы сможете определять больше повторно используемых классов, и у вас будет все более и более хорошо организованное распределение элементов.
3) Организуйте свои компоненты, используя модель БЭМ.
БЭМ представляет собой лучший способ организовать ваш CSS. В разделе «Сравнение стилей кода CSS и решение, какой из них является наилучшим», я привел три примера для объяснения темы. Третий отлично показывает «блок» БЭМ с некоторыми «модификаторами», хотя никаких «элементов» не было. Этот способ кодирования может помочь вам при появлении новых дополнений на вашей странице.
4) Не указывайте идентификаторы в CSS.
Это связано с тем, что селекторы очень специфичны и могут приводить к выражениям ! Important, которые крайне нежелательны, так как они нарушают переопределяющие структуры.
Связанное сообщение: Сравнение стилей кода CSS и выбор наилучшего метода
5) Используйте Рекомендации Github по CSS.
Рекомендации Github предоставляют удобный способ программирования, упрощая чтение кода будущими соавторами.
6) Избегайте использования ! important любой ценой.
Я думаю, вы уже знаете причину этого, но просто напоминаю вам, что операторы ! Important должны использоваться только для переопределения свойств CSS , которые были застряли в HTML внешними библиотеками.
7) Используйте бутстрап только при необходимости (убедитесь, что вы понимаете его перед использованием).
Я видел много ошибок, которые люди допускают при использовании начальной загрузки, это очень мощный инструмент, но если вы воспользуетесь им неправильно, это может привести к большим проблемам, которые, очевидно, будут исправлены неправильным путем путем переопределения ненужных свойств. Поэтому, пожалуйста, прочтите, что вы собираетесь использовать, и используйте эти функции только тогда, когда они действительно необходимы. Нет необходимости использовать сетку начальной загрузки для всего, в большинстве случаев вы можете легко решить свою проблему с помощью встроенных блочных элементов.
8) Делайте HTML-код простым и читабельным.
В вашем HTML не должно быть лишних элементов. Иногда программисты склонны заключать одни теги внутрь других, когда в этом нет необходимости. Всегда старайтесь, чтобы ваша иерархия была как можно проще и используйте теги HTML, которые лучше всего соответствуют содержанию, которое они содержат. Таким образом, если ваш CSS не загружается, по крайней мере, пользователь сможет увидеть основную организацию страницы.
Надеюсь, эти идеи помогут вам в ваших будущих проектах. Просто помните: сначала вам нужно иметь организованную структуру в HTML, прежде чем переходить к БЭМ-ориентированной модели CSS.
Спасибо, что прочитали этот пост! Если вы сочли это полезным и еще не прочитали Сравнение стилей кода CSS и определение наилучшего метода, взгляните на него, он вам точно понравится!
Автор: Габриэль Занзотти ( [email protected] )
