{"draftJsState":{"blocks":[{"data":{"image":{"id":"64c2ba9e34f50a043f09b51a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"68h7j"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"bbunj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда фронтенд-разработчик с нуля создает проект с новыми идеями и требованиями, перед ним встает довольно хлопотная проблема: базовые стили CSS. Часто с ними нереально работать без настройки.","type":"unstyled","key":"9svah"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":13,"offset":84}],"inlineStyleRanges":[],"text":"Вам наверняка приходилось писать какие-то сбросы или использовать инструменты вроде normalize.css. Но даже после применения этих инструментов все равно получается одно и то же. На самом деле они не столько сбрасывают стили, сколько делают их одинаковыми в разных браузерах. Я покажу пример кода, который можно вставить в каждый CSS в корне проекта, чтобы больше не переписывать одни и те же базовые стили в надежде сделать их полезными.","type":"unstyled","key":"7cup1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблема","type":"header-three","key":"7gpj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку сейчас не 2010 год, ваш сайт, вероятно, не выглядит так:","type":"unstyled","key":"cb5j5"},{"data":{"image":{"id":"64c2bab60c02611e6bf86f48"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5pkjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо этого у вас, скорее всего, есть в запасе какой-нибудь проект Figma, из которого вы рассчитываете точно скопировать необходимое в надежде на то, что этого будет достаточно. Так в чем же проблема?","type":"unstyled","key":"4d0j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если использовать стили по умолчанию, то CSS станет неконтролируемым монстром, который испортит весь рабочий процесс. При этом вы будете чувствовать, что есть некое решение для предотвращения случайного поведения стилей по умолчанию. Но о нем никто не сможет вам рассказать, как и понять, что происходит, когда вам понадобится отладка кода.","type":"unstyled","key":"8tvmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поля и отступы по умолчанию","type":"header-three","key":"8c5ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию почти все элементы в html имеют стандартные свойства полей (margin) и отступов (padding). Из-за этого по умолчанию сайт выглядит хорошо, но при попытке внести изменения приходится заходить в MDN и проверять фактические размеры, затем рассчитывать их и только потом применять свои стили. Это довольно хлопотно, поэтому почти все разработчики выполняют следующее:","type":"unstyled","key":"2j3rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* {\n margin: 0;\n padding: 0;\n}","type":"blockquote","key":"2g2n5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При этом у каждого элемента будут удалены значения по умолчанию, чтобы разработчик мог использовать собственные.","type":"unstyled","key":"ep0ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блочная модель CSS","type":"header-three","key":"31mi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы, вероятно, знаете, размер каждого элемента в CSS рассчитывается с помощью блочной модели (Box Model). Это концепция учитывает размеры полей (margin), отступов (padding) и границ (border) элемента для расчета общего количества пространства, которое элемент займет в DOM:","type":"unstyled","key":"6bc1h"},{"data":{"image":{"id":"64c2bab62b84c50c8d48f8bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"atokf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию в этом поведении есть небольшая загвоздка: без всякого вмешательства ширина границы будет вычисляться с отступом — за пределами элемента! Допустим, у нас есть квадрат, подобный этому:","type":"unstyled","key":"2a00t"},{"data":{"image":{"id":"64c2bab6ec23932585fa395f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"42lbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Размер квадрата составляет ровно 300x300px, как и предполагалось, но затем мы заключаем его в рамку:","type":"unstyled","key":"2prkc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border: 10px solid red;","type":"blockquote","key":"4e02u"},{"data":{"image":{"id":"64c2bab67a75164046efe3d4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fmuj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он становится размером 320x320px из-за суммарного размера границ. Нам пришлось бы уменьшить фактический размер квадрата, чтобы он вписался в заданные параметры.","type":"unstyled","key":"31d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы избежать этого, есть простое решение:","type":"unstyled","key":"bas64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"*,\n*::before,\n*::after {\n box-sizing: border-box;\n}","type":"blockquote","key":"9nenk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка свойства box-sizing в border-box для каждого элемента обеспечивает вычисление границы с отступами, т.е. внутри элемента.","type":"unstyled","key":"csut9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оформление списков","type":"header-three","key":"27kii"},{"data":{"image":{"id":"64c2bab63a415323ab8a0ce2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e9hqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя в некоторых случаях маркированные списки могут быть полезны, в основном они устарели, особенно если вы используете

\n some text \n

\n\n

\n some more text \n

\n\n

\n some even more text\n

с классом ryan-box следующим образом:","type":"unstyled","key":"3qe91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".ryan-box {\n width: 30rem;\n}","type":"blockquote","key":"ehqhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот что получается:","type":"unstyled","key":"9rh4q"},{"data":{"image":{"id":"64c2bab834f50a043f09d6f2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7hknc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, чего же нам не хватает?","type":"unstyled","key":"5o843"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию изображения в HTML имеют полный размер, если не указано иное. Исправим эту проблему следующим образом:","type":"unstyled","key":"24fki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img {\n max-width: 100%;\n}","type":"blockquote","key":"5o8sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь все в порядке:","type":"unstyled","key":"ecio9"},{"data":{"image":{"id":"64c2bab8bed8e772d86b9950"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1tirb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В дополнение к этому уточним, что по умолчанию все изображения должны быть на новой строке. По стандарту они являются элементами inline и будут оставаться на той же строке, что и текст, что я редко встречал в своей жизни:","type":"unstyled","key":"33fb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"img {\n max-width: 100%;\n display: block;\n}","type":"blockquote","key":"2bc10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблицы","type":"header-three","key":"bof99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, у нас есть таблица со случайным сообщением, закодированным в ней с помощью ChatGPT:","type":"unstyled","key":"84i2k"},{"data":{"image":{"id":"64c2bab9329e217f07efe270"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5m6m2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуем добавить цвета таблице, например сделаем ее темной, а ячейки светлыми:","type":"unstyled","key":"1ue63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"table {\n background-color: black;\n}\n\nth, td {\n background-color: white;\n}","type":"blockquote","key":"751jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат:","type":"unstyled","key":"ao7d9"},{"data":{"image":{"id":"64c2bab993970f3a1516d775"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ddbio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что это за линии? Откуда они берутся? Оказывается, базовая html-таблица имеет встроенные границы, но по умолчанию они прозрачны и, следовательно, невидимы для нас. Что еще более важно, эти элементы занимают место и фактически портят вашу работу, как и упомянутый ранее box-sizing. Итак, что же можно сделать?","type":"unstyled","key":"79i5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убираем все границы из таблицы с помощью этой простой строки:","type":"unstyled","key":"f355i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-collapse: collapse;","type":"blockquote","key":"254t1"},{"data":{"image":{"id":"64c2bab95de28b72a5cf1da5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"enofs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть еще один небольшой нюанс: в отличие от изображений, таблицы не растягиваются полностью, подстраиваясь под ширину родителя. Чтобы исправить это, применим следующее:","type":"unstyled","key":"dois4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"table {\n width: 100%;\n border-collapse: collapse;\n}","type":"blockquote","key":"5hns6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"d9102"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге у нас получился не такой уж и маленький список свойств:","type":"unstyled","key":"e7nrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* {\n margin: 0;\n padding: 0;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbutton {\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\na {\n text-decoration: none;\n color: inherit;\n}\n\nul {\n list-style-type: none;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}","type":"blockquote","key":"1lk8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получаем более привлекательный сайт, которым гораздо легче управлять:","type":"unstyled","key":"va3r"},{"data":{"image":{"id":"64c2babcc744bc08a48e1b03"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"24sle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"emnlb"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":65,"offset":0}],"inlineStyleRanges":[],"text":"Будущее CSS: новейшие возможности языка декорирования в 2023 году","type":"unordered-list-item","key":"eulas"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":47,"offset":0}],"inlineStyleRanges":[],"text":"Ускорьте создание пиксельной графики в 10 раз ?","type":"unordered-list-item","key":"33n3k"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":52,"offset":0}],"inlineStyleRanges":[],"text":"Сайты с модальными диалоговыми окнами без JavaScript","type":"unordered-list-item","key":"9at9e"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":14},{"key":6,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"8pjv6"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":14,"offset":15},{"key":8,"length":38,"offset":31}],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Serpentarius13: Basic CSS resets to apply in every app","type":"unstyled","key":"ds01h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"34aUrt0PDVYKkS0CBRO0"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/18298/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://necolas.github.io/normalize.css/","url":"https://necolas.github.io/normalize.css/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/18127/","url":"https://nuancesprog.ru/p/18127/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/9616/","url":"https://nuancesprog.ru/p/9616/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/12893/","url":"https://nuancesprog.ru/p/12893/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://medium.com/@serpentarium13","url":"https://medium.com/@serpentarium13"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://itnext.io/basic-css-resets-to-apply-in-every-app-9bd724dc4f49","url":"https://itnext.io/basic-css-resets-to-apply-in-every-app-9bd724dc4f49"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}