Лучшие практики для стилизации элемента, который можно расположить в любом месте страницы - PullRequest
Новая
       46

Лучшие практики для стилизации элемента, который можно расположить в любом месте страницы

0 голосов
/ 14 июня 2019

Я хотел знать, есть ли лучшая практика для стилизации любого элемента, который, в свою очередь, может быть помещен в любое место на странице и сохранить его поле. Например: Тег <h1> с набором правил margin-bottom: 2rem; и тег <p> с набором правил margin-top: 2rem. Теперь эти элементы можно использовать в любом месте веб-страницы. Но если мы поместим <h1> перед тегом <p>, с которым мы столкнемся с интервалом 4rem, теперь я хотел бы придерживаться одного или другого пространства. Напоминаем, что это небольшой пример, веб-страница может содержать все виды HTML-элементов, а также кнопки и другие компоненты. Чтобы создать набор правил для каждого экземпляра и комбинации, это отнимает много времени и обременительно, есть ли лучший способ?

Ответы [ 2 ]

2 голосов
/ 14 июня 2019

, если вы знаете захват полей , поэтому вы понимаете, что оставшееся поле между <h1> и p составляет всего 2rem, а не 4rem, а здесь stackoverflow answerlink на ваш вопрос ... надеюсь, вы получили помощь от этого

0 голосов
/ 14 июня 2019

Большинство элементов (таких как <h1> и <p>) имеют встроенные вертикальные поля по умолчанию.Это «общепринятые» рекомендации, и вам не нужно явно нуждаться в , чтобы перезаписать их.Однако вы можете , и если вы хотите установить свои собственные «общие» поля, которые можно использовать где угодно, лучшим подходом будет использование классов.Например: 

.margin-top {
  margin-top: 15px;
}

Любой элемент с этим классом (например, <h1 class="margin-top">) будет перезаписывать это правило по умолчанию.Естественно, вы могли бы применить правило непосредственно к h1,

Да, вы столкнетесь с ситуациями, когда верхний и нижний поля расположены рядом друг с другом, но вам нужно будет поработать, когда это произойдет.поведения приемлемо, а когда нет.Один из способов избежать этого - использовать смежные братские комбинаторы : 

h1 + p {
  margin-bottom: 0;
}

Поскольку вышеприведенное правило обладает большей специфичностью , чем универсальный селектор h1,это будет иметь приоритет.

Да, будет сложно определить все возможные комбинации, с которыми вы можете столкнуться, и вам придется писать правила для каждого сценария.Но вы можете использовать описанный выше класс-ориентированный подход в сочетании с соседними одноуровневыми комбинаторами, чтобы значительно помочь устранить эту проблему: 

.margin-top {
  margin-top: 15px;
}

.margin-bottom + .margin-top {
  margin-top: 0;
}

Это полностью предотвратит любой элемент с классом margin-top от применения его поля только , если он следует классу с установленным margin-bottom.

Обратите внимание, что уже существует много других подходов, и один такой подход делаетиспользовать аналогию Lego, чтобы предложить просто использовать padding на каждом элементе, равном половине желоба: 

$gutter: 20px;
.element {
  padding: $gutter / 2;
}

, что иллюстрируется в полном примере кода для проверки концепции здесь .

...