Всем привет!

Не знаю как у других, но у меня с вёрсткой не всегда все гладко и часто приходится гуглить проблемы. И дело не в сложности, а просто в отсутствии обширной практики. А в наше время CSS совсем не простая штука, очень много всевозможных нюансов, о которых нужно знать.

Одна из проблем, с которой сталкивался - вертикальное выравнивание текста.
Вот небольшой материал на эту тему

#css

Всем привет! 🖖

Каждый раз, когда я начинаю новый проект, сталкиваюсь с муками выбора структуры CSS.
Насколько я знаю, у многих так.
Чаще всего я пользуюсь SCSS и применяю паттерн, о котором я писал 7-1.
Иногда это гибридные варианты, когда в Реакт использую модули.
Сейчас текущий проект так организован - размещение файлов стилей у каждого компонента(не модули), но подключение в едином файле по паттерну 7-1.
Да, можно приводить доводы, что вот этом проекте вот так оптимальнее, а в этом вот эдак. Но суть в том, что бы не только вы это понимали. Поэтому лично я предпочитаю общепринятые методики, в команде и для дальнейшей поддержки проекта это гораздо важнее.
Сегодня прочел ещё один интересный вариант, думаю попробую в следующий раз.
А как вы структурирует CSS? Поделитесь в чате

ЗЫ Если кто не читал про паттерн 7-1

#css

Руководство по абсолютным и относительным величинам в CSS.

👉 http://css.yoksel.ru/size-units/

#css

Реактивный ... CSS!

Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett

👉Подробнее

#css

Всем привет!

Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS

#css

Всем привет!

Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍

#css #grid

Коллекция примеров оформления ссылок + можно кодом воспользоваться.
Рекомендую👍
#css

Clip-path - как использовать обрезку в CSS.

👉Подробнее

#css

Всем привет!

Наткнулся на интересную статью, в которой автор заставил меня задуматься, о вертикальной составляющей в адаптивном дизайне. А то я, как и многие, обычно только ширину учитываю.

👉Отзывчивый веб-дизайн и учёт высоты окна браузера

#css

Всем привет!
Наткнулся на прикольную статью от одного токсичного автора - в ней он предлагает вариант "адаптивного" шрифта для различной ширины экрана на чистом CSS с использованием em.

#css

Нестандартное мышление с CSS Grid - перевод статьи Энди Барефут, в которой он показывает, какие крутые штуки он создаёт

#css

Всем привет!

Наткнулся на свежие актуальные мини-уроки по CSS - рекомендую не очень опытным коллегам или ещё обучающимся.

👉Подробнее

#css

Всем привет!

Изображения, это первое, что начинают оптимизировать на странице, для увеличения скорости загрузки.
Автор статьи Максимальная оптимизация загрузки изображений для Интернета в 2021 году приводит 8 методов для оптимизации изображений.
ЗЫ Я недавно делал подобную оптимизацию, что моментально поднимает рейтинг страницы в Google PageSpeed Insights

#css

Не могу не поделиться таким CSS clip-part генератором, который мне сегодня скинул коллега в нашем чате.
Рекомендую 👍

#css

Всем привет!
Не могу сказать, что полностью согласен с автором статьи, но в общем направление верное. Да и комментарии попадаются полезные.

#css

Всем привет!

Мне нравится мощь CSS Grid, да и поддержка браузерами уже позволяет сегодня использовать данную технологию во многих проектах.
Кто не в курсе - в Chrome DevTools уже можно отлаживать, с недавних пор)))
👉 Подробнее

#css

Всем привет!

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

👉Подробнее

#css