{"draftJsState":{"blocks":[{"data":{"image":{"id":"5b858c82c1ccb200a9cfb807"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"41i58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bqngr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не буду лить воду, приступим ","type":"unstyled","key":"8vnvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Проанализируйте макет сайта. Просмотрите все страницы. Найдите закономерности и запишите их в классы в свой style.css. Если вы нашли 3 вида заголовков, создайте подходящие классы для каждого. Стилизуйте все кнопки и формы. Это очень удобно, в будущем вы будите писать гораздо меньше кода. Например на вашем сайте существует 3 заголовка. Первый основной с font-size: 40px и font-weight: bold. А 2 остальных с font-size: 32px и 24px. Создайте класс .title и 2 модификации к нему изменяющие размер шрифта. Далее вы вместо написания дополнительных стилей просто будите писать примерно так class=\"title title-min\".","type":"unstyled","key":"3earv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.2. Изучите методологию Блок-элемент--модификатор. БЭМ довольно спорное решение, но я не говорю вам следовать ему. Идеи заложенные в нем помогут вашему коду стать лаконичнее, понятнее и его станет заметно меньше. Данная методология позволила сократить количество строк в style.css примерно в 1.5 раза.","type":"unstyled","key":"5c7j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Используйте мета-языки. Что это ? Это языки созданные для описания других языков. Звучит не рационально, но какой код для вас выглядит приятнее ? ","type":"unstyled","key":"2vr9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3ceeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t

item 1
item 2
item 3

","type":"blockquote","key":"7lssv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7kt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2gdlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".wrap","type":"blockquote","key":"3bmss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\tul.list-wrap","type":"blockquote","key":"7dcr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t\tli.item-list item 1","type":"blockquote","key":"1p84i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t\tli.item-list item 2","type":"blockquote","key":"e9mke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t\tli.item-list item 3","type":"blockquote","key":"2i5a8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя мета-языки вы сможете выстроить четкую иерархию файлов. Вы сможете повторно использовать код гораздо чаще, а с помощью postcss вы и вовсе сможете использовать возможности css-4 до его выхода. Вы узнаете, что такое переменные в css. Поверьте мне, это сокращает процесс разработки в разы. Вот некоторые мета-языки: для html-pug/jade, для css-postcss, less, sass. ","type":"unstyled","key":"3mqbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Не стойте на месте, изучайте новое.","type":"unstyled","key":"34u0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":232,"style":"BOLD"}],"text":"Представьте свою жизни без bootstrap или сеток, flexbox. Без этого нам бы пришлось не сладко. Теперь представьте, что где-то на свете есть технологии настолько-же полезные, но вы о них не знаете. Я вас уверяю такие технологии есть, ИЩИТЕ их. Кто из нас изучил css-grid ? Думаю, мало. А ведь эта штука в разы круче flexbox. Начните двигаться вперед уже сегодня.","type":"unstyled","key":"8d9ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь эта статья оказалась полезной для вас. Комментируйте, ставьте лайки или даже дизлайки, подписывайтесь.","type":"unstyled","key":"e7mrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"E1a6Xi9I04jMPqS9eqoi"}],"entityMap":{}},"mentions":[]}