m1rko Jul 19 2020 at 06:18

Чего я не знал о CSS

6 min

35K

CSS*Web design*

Translation

+25

Comments 30

eandr_67 Jul 19 2020 at 11:49

«1ch обычно шире среднего символа обычно примерно на 20−30%»

Не хватает комментария переводчика, что указанные цифры характерны только для латиницы. Для других алфавитов (в частности, для кириллицы) соотношения будут совершенно иными.

Denai Jul 19 2020 at 13:23

Отступ и заполнение

За что? nth-child ещё напишите как н-й-потомок

UFO landed and left these words here

maggg Jul 19 2020 at 15:41

Я тоже верстаю примерно с 2000 года, и тоже в самом начале просто воспроизводил увиденное. Но с концепциями типа схлопывающихся маржинов, блочных и строчных элементов, можно уж как-то разобраться, даже просто воспроизводя увиденное. Остальные вещи, включая инлайн-блоки, появились значительно-значительно позднее.

maggg Jul 19 2020 at 15:47

И ещё: в большинстве случаев сегодня совершенно необязательно использовать относительные единицы. Пиксели работают хорошо.

megahertz Jul 20 2020 at 05:52

Так и есть. Было актуально в IE, то-ли до 7, то-ли до 8 версии из за особенностей масштабирования.

denisshabr Jul 19 2020 at 17:23

Совершенно не раскрыто, чем же em и rem лучше px. При Ctrl+ всё одинаково увеличивается.

Tangeman Jul 20 2020 at 04:55

Если вам важен точный размер элемента или шрифта на экране, а не только масштабирование, то пиксели не решат этой проблемы — всё будет зависеть от размера и разрешения экрана.

M_Egor Jul 20 2020 at 04:32

Полезная статья для новичков, к счастью про большинство этих нюансов есть толковые видео в ютубе

Faugore Jul 20 2020 at 04:32

Стоило бы уточнить, что nth-of-type работает только с селекторами по тегу

kostrovart Jul 20 2020 at 11:16

Вот за это max-width: 100%; (применительно к img) надо руки отрывать

UFO landed and left these words here

oinovikov Jul 20 2020 at 15:33

Пожалуйста, заклинаю, не делайте никогда так

* {
    box-sizing: border-box;
}

И не советуйте другим.

UFO landed and left these words here

oinovikov Jul 20 2020 at 16:29

В первую очередь, глобальный селектор.

UFO landed and left these words here

oinovikov Jul 20 2020 at 17:19

Так дело вовсе не в скорости.

UFO landed and left these words here

kevin Jul 20 2020 at 20:31

Видимо только масонам доступно.

kai3341 Jul 21 2020 at 16:17

Это же элементарно, Ватсон. Неужели вы никогда не подключались к существующему проекту? Обилие таких нюансов ни разу не идёт на пользу скорости погружения нового человека в проект

UFO landed and left these words here

AdskiySiniyBanan Jul 22 2020 at 03:43

Я специально зарегистрировался на хабре чтобы узнать что же с таким написанием не так, не томи, у меня ведь это в каждом проекте с начала карьеры :)

MiXei4 Jul 22 2020 at 22:53

так лучше

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Clasen01 Jul 27 2020 at 03:24

Точно лучше? И чем же?

AdskiySiniyBanan Aug 4 2020 at 10:48

Я так же могу сказать что лучше не так, какие аргументы в пользу того что так лучше?

jt3k May 25 2021 at 04:55

Этот способ плох, когда вы делаете библиотеку компонентов и ваши блоки будут использоваться в многих сайтах/страницах. Таким селектором вы взорвёте дизайн там где не использовали глобальный bzbb.

Ну и это не по БЭМу, если вы понимаете, что бэм не про нейминг селекторов.