![](http://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/hub/20a/faf/e86/20afafe861e9814e46e8a20c8527bd80.png)
CSS *
Каскадные таблицы стилей
- Новые
- Лучшие
- Все
- ≥0
- ≥10
- ≥25
- ≥50
- ≥100
Новости
Как правильно верстать 2, или зачем я написал еще одну UI-библиотеку, мой первый npm-модуль?
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/549/e37/7d9/549e377d962c1bd8a6d7c25f0e407984.jpg)
Это работа является логическим продолжением моего первого подробного текста для сообщества об актуальных подходах к верстке Как верстать веб-интерфейсы быстро, качественно и интересно. Но, если в первом трактате, внимание уделялось, прежде всего, стилю кода, его качеству и эффектным современным возможностям различных препроцессоров и фреймворков, что демонстрировалось на некоторых конкретных специфических задачах, теперь хочется сфокусироваться на архитектурных или даже организационных аспектах веб-производства. Если вы не читали мой первый текст, но собираетесь при этом прочесть этот — не поленитесь перейти по ссылке и пробежать глазами самые последние разделы каждой из двух частей первого пособия: «Готовые решения» и «Песочницы». Этот текст начинает прямо с этих мест и развивает именно эти идеи: и о пагубности применения раскрученных-популярных «на все готовых» UI-«дизайн-систем»-фреймворков для создания кастомизированных веб-морд любой сложности и, о, по сути, полезности использования хотя бы минимального документирования и явных соглашений при разработке веб-GUI на фронтенде. Но я не стану тратить время, доказывая, что «ни в коем случае нельзя использовать Vuetify или AntDesign» для создания крупных UI-систем с полностью кастомным оформлением. Вам не нужно прикручивать себе огромный геморрой непроницаемый слой плохо кастомизируемого готового GUI для того чтобы написать кнопку или поле ввода! Если вам нужен датапикер — найдите и допилите что-нибудь под себя. Это понимание может только прийти или так и не придти с годами тяжелого опыта, когда вы будете постоянно тратить непростительно много своего времени на то, чтобы написать очевидно отвратительный CSS — «кряки с !important`ами поверх стилей библиотеки», выдумывать чудные костыли на javascript чтобы изменить дефолтное поведение виджетов на кастомное и хитрое-нестандартное затребованное вашими дизайнерами... И при этом ваши шаблоны, стили и js-обвязки будут превращаться во все менее читаемые запутанные нагромождения разнообразно оформленного кода, с различным подходом к наименованию и прочими бедами… Этот текст и написанный для него проект призваны наглядно показать «а как надо?».
Дайджест свежих материалов из мира фронтенда за последнюю неделю №487 (27 сентября — 3 октября 2021)
Создание компонента Toggle
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/781/7bd/e1d/7817bde1d91dbc2d46d6917bdf8d867c.jpg)
В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.
Easing Functions – функции плавности для CSS-анимации и переходов
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/037/18b/e46/03718be465eec13082fbf965ec0cdffd.png)
Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.
История о CSS-сбросах и все, что о них нужно знать. Еще раз об этом
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/efe/64b/c13/efe64bc13c1d28f08e2e37e637c2f2e5.png)
Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.
В какой-то момент, после создания нескольких веб-проектов с нуля несколько раз подряд и столкнувшись с одними и теми же проблемами в разных браузерах, я выработала определенный "стиль работы", если можно так выразиться, и корректировка моего CSS-кода в разных браузерах способом "исправил - и готово" перестала меня устраивать. Тогда я решила изучить процедуру сбросов и обнаружила в них гораздо больше нюансов, чем казалось вначале.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №486 (20 — 26 сентября 2021)
CSS-переменные в медиазапросах
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/091/c44/4e2/091c444e293932b5b93bd3c4aa06b6d0.png)
К большой радости узнал о существовании PostCSS-плагина "PostCSS Custom Media", который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации "Media Queries Level 5", преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №485 (13 — 19 сентября 2021)
Используйте фавиконки правильно
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/625/80b/50d/62580b50d4afe72e4a6565cd85e394b5.jpg)
Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.
Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest
для подключения всех фавиконок к вашему сайту.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №484 (6 — 12 сентября 2021)
Дайджест свежих материалов из мира фронтенда за последнюю неделю №483 (30 августа — 5 сентября 2021)
Веб-технологии, которые могут работать не так, как ожидается
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/webt/wa/4h/r8/wa4hr8m8zkwpsls1zpk32etiuyo.jpeg)
Я попадал в такие ситуации. Например, при использовании механизма ленивой загрузки в HTML. Соответствующий атрибут очень легко добавить в разметку, описывающую изображение, сделав это только для того, чтобы понять… что для работы ленивой загрузки нужно и кое-что ещё. Здесь мы поговорим и об этой проблеме, и ещё о некоторых возможностях, доступных веб-разработчику, которые могут работать не совсем так, как ожидается.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №482 (23 — 29 августа 2021)
Дайджест свежих материалов из мира фронтенда за последнюю неделю №481 (15 — 22 августа 2021)
Почему инлайнить стили — плохо
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/1d4/83b/427/1d483b4279a3948a9ba867fde13269a8.png)
CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link
. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.
Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.
Критерии качества вёрстки 2021
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/ad6/5ce/06a/ad65ce06a05349069e84ba2228c0197e.png)
6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.
С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.
Сейчас пришло время обсудить с сообществом обновлённые критерии.
В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.
Как я написал веб-синтезатор без сэмплов и зависимостей
![](https://webcf.waybackmachine.org/web/20211011000958im_/https://habrastorage.org/getpro/habr/upload_files/6a3/011/834/6a3011834bb8b19b837fd111511d51f5.png)
Немного зная теорию музыки, чтобы создать цифровой инструмент, мы можем воспользоваться простыми HTML, CSS и JavaScript без каких-либо библиотек или аудиосэмплов. К старту курса по Frontend-разработке делимся статьёй, автор которой рассказывает, как написать простой, но эффектный синтезатор.
6 хороших практик по HTML и CSS
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)
Вклад авторов
-
alexzfort 8857.0 -
grokru 2491.2 -
ilusha_sergeevich 1780.6 -
alizar 837.8 -
dudeonthehorse 641.0 -
ilya42 500.8 -
Delka 497.0 -
Mithgol 474.0 -
derSmoll 452.0 -
Paul_King 421.0