• Использование тега ‹Link› с компонентом отбрасывает высокоуровневый CSS и требует решения в родительском элементе.

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

  • Свертывание полей очень сбивает с толку и может вызвать проблемы с вашим идеальным макетом CSS.

Я столкнулся с этой проблемой при попытке разместить некоторые элементы в центре поля. Я заметил, что в нижней части было гораздо больше места, чем в верхней части, что не имело для меня никакого смысла. Используя Chrome Inspector, я увидел, что поля собраны вместе. В итоге я просто изменил использование полей в свернутых дочерних элементах на использование отступов внутри элементов внутри этих дочерних элементов, чтобы избежать этой проблемы. Более подробную информацию об этом можно найти здесь: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

  • Конфликты CSS из-за использования одних и тех же имен классов или слишком общего характера могут стать настоящей головной болью.

Эта проблема всплывала несколько раз. В первый раз это произошло потому, что я использовал очень общий селектор CSS, такой как

.parent {
   div {
   }
}

Поначалу все было в порядке, но затем, поскольку уровень был настолько высоким, это повлияло на более поздние элементы div без моего ведома. Мне просто нужно быть осторожным, когда я так широко использую свои селекторы. Я также повторно использовал имена классов, даже не осознавая этого. Мне не нравится делать имена моих классов такими подробными, и с SASS это не должно быть такой большой проблемой. Мне просто нужно убедиться, что я правильно использую SASS, и чтобы быть в безопасности, я очень точно называю имена своих классов.

  • Нет простого способа раскрасить разделы div, когда есть отступы и поля.

У меня был большой контейнер, в котором были элементы, и я хотел использовать отступы в родительском контейнере, чтобы элементы находились вдали от контейнера. Это превратило в кошмар попытку добавить цвет фона к дочернему элементу, который хотел заполнить ширину родителя, поскольку на нем было это дополнение. Существует обходной путь с использованием CSS Gradient, но он не очень специфичен и, вероятно, плохо подходит для других размеров экрана. Вместо этого я решил удалить отступы из родителя и добавить дополнительную оболочку только для окрашивания фона, а затем добавить отступы к каждому дочернему элементу в разделах. Это больше работы и больше подробностей, но не такое хакерское решение.