Дизайнерам и фронтендерам — Что делать с 1px бордерами?

pixel perfect не нужен
оставь бордер по сетке в 8px

А есть более конкретный пример, чем серые квадраты?

У меня использование бордеров зависит от задач.

• Если кнопка или поле, то бордер внутренний. Удобно работать с отступами, когда у контейнера ничего не торчит наружу.

• Если иконка, то бордер средний, чтобы правильно скруглялись кривые. Ещё удобно рисовать разные состояния, например, когда иконка должна быть линейной, а потом заливаться цветом.

• Если табличка или линейки между объектами, то бордер наружний. Ячейка или строка в таком представлении просто объект, а линейки разбивают эти объекты. Чаще всего тут даже не бордер, а просто отдельная линейка.

Обычно задается свойство box-sizing: border-box

По умолчанию, именно border-box считается стандартным соглашением между дизайнером и разработчиком.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Цитирую mdn

border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

Есть статья еще 2012 года от Paul Irish. Он отвечает в Google Chrome за Developer Tooling;

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Он рекомендует задавать box-sizing: border-box всем элементам.

Такое правило часто встречается во всяких reset.css и normalize.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

От себя могу сказать, что когда-то давно видел правило исключение, для input[type="search"]

input[type="search"] {
    -webkit-appearance: textfield; 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

Но это было для Safari 5 и каких-то совсем старых Chrome.

простите, я чет не понимаю проблемы (как фронтэндер), разве же это не так должно быть?

По умолчанию в HTML/CSS бордер снаружи, но его легко сделать так, чтобы он был внутри через border-box, так что этот выбор несущественен, смотрите как у вас в сетку ложится. Бордер посередине это вообще что-то неведомое.

Проблему с двойными бордерами легко решить через отрицательные марджины: https://codepen.io/alextewpin/pen/BaRrEKE Прием хорошо подходит для верстки сеток, до модного grid их все так и делали.

Можно еще таблицами верстать, но в 2к21 это как-то эээ.

Так уж вышло, что я дизайнер, который сам дизайнит, а потом сам свои же макеты верстает.

На вёрстке никаких проблем нет.

Например, стоят 4 блока с однопиксельной рамкой в ряду, я просто напишу:

.box {
border: 1px solid #000;
}

.box ~ .box {
border-left: none;
}

Если что-то на пиксель не попало в сетку — ваще пох, никто этого не увидит.

Если два и более рядов, то всякие :nth-of-type() поправят дело.

Если захочу в фигме идеал, добавлю лишние обёртки, которые скроют ненужные рамки.

https://www.figma.com/file/hu4spQFPca1YxB71fBR75M/samples-for?node-id=2:2

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

Ну и в качетсве З.Ы. осмелюсь подкинуть своего потенциально холиварного убеждения, что дизайнеру интерфейсов здорово бы было уметь верстать, с этим скиллом снимается много вопросов, как на уровне взаимодействия со своим макетом, так и на уровне взаимодействия с коллегами.

Если речь идёт о вёрстке, то есть такая чудесная вещь как outline: 1px solid red, которая, собственно, не пихает никакие блоки, а просто рисует линию там, где она должна быть

UPD: поэтому при их наложении не будет линии х2

Верстать таблицами как в 2001 году, тогда такой проблемы не было!