Какие свойства CSS нарушают структуру макета / поток?
Цитирование Написание модульного CSS (часть 2) - Пространства имен (автор Зелл Лью)
Объекты не зависят от контекста. Когда я говорю, что объекты не зависят от контекста, я имею в виду, что они не знают, где они используются. Вы можете поднять любой объект, выбросить его куда-нибудь еще, и это не нарушит структуру вашего сайта.
Это также означает, что объекты не должны изменять какую-либо структуру вне себя. Таким образом, объектные блоки не могут содержать ни одно из этих свойств / значений:
- абсолютная или фиксированная позиция.
- margin.
- padding (если у вас нет цвета фонав этом случае не прерывает выравнивание вне объекта).
- float.
- и т. Д. *
Серьезно относитесь к этой цитате:
Это также означает, что объекты не должны изменять какую-либо структуру вне себя. Итак, объектные блоки не могут содержать ни одно из этих свойств / значений:
Я хотел бы знать другие свойства CSS, которые мне следует избегать использовать для компонентов / объектов (следующие методологии, такие как BEM И более прозрачный код пользовательского интерфейса Гарри Гарри Роберта с ) или атомами / молекулами ( методология атомного проектирования Брэда Фроста ).
Я полагаю, что понимаю основную концепцию этихМетодологии CSS, но я часто зацикливаюсь на попытках разделить проблемы, позволяя компонентам быть независимыми и позволяя стилям компоновки склеивать компоненты.
Полагаю, что если сделать это правильно, это значительно снизит побочные эффекты.
Папка My Sass в большинстве случаев выглядит следующим образом:
- компоненты
- layouts
- макет компонентов, специфичный для контента (макеты на уровне блоков), которого мне в настоящее время не хватает на
- страниц
- Gloмакеты (страницы), отображение 90%: flex / grid
- _variables.scss
- style.scss
файлы в папке макетов, которые я намеревался / планировал использовать для размещения элементов внутри компонентов / объектов, слишком малы. (пустые или только несколько строк кода) Я часто ловлю установку всех CSS в таблице стилей компонента. И после того, как мой компонент «закончен», у меня возникают проблемы с разборкой ответственных свойств CSS, из-за чего компонент или макет ломаются.
Итак, каких свойств CSS следует избегать в компонентах?
Если у вас есть какой-либо опыт, и мой совет для решения, пожалуйста, поделитесь им. :) Любой совет приветствуется.