Архивы css - Компьюти
Logo КОМПЬЮТИ

Посты с тэгом: css

Tailwind CSS в корпоративных проектах: почему разработчики уходят от кастомного CSS

Tailwind CSS в корпоративных проектах помогает ускорить разработку интерфейсов и упростить поддержку кода. Узнайте, когда utility-first подход выгоднее традиционных стилей и как внедрить его без лишних затрат. Разберём примеры, ограничения и практические рекомендации для бизнеса.

10 хороших практик CSS

Каждый разработчик через это проходил – борьба с CSS, который сначала казался простым, но быстро становился громоздким. В этом руководстве мы рассмотрим распространенные подводные камни CSS и их современные, поддерживаемые решения. Давайте превратим ваш CSS из проблемного в профессиональный!

«Называть вещи сложно» — гласит аксиома разработки программного обеспечения, и CSS не является исключением. Вот несколько собранных мыслей, связанных с именованием пользовательских свойств CSS.

Я собираюсь использовать термины «переменная» и «настраиваемое свойство» как взаимозаменяемые, поскольку по сути это одно и то же с точки зрения того, как их называть.

Использование CSS счетчиков

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

Но мы можем использовать концепцию счетчиков CSS, чтобы превратить любой элемент в счетчик.

Так что же это за счетчики CSS? Мы можем рассматривать их как переменные, поддерживаемые CSS. Правила CSS могут увеличивать значения, которые будут отслеживаться, сколько раз они используются.

Использование и стилизация input checkbox
чекбоксы

В данной статье мы поговорим об использовании и стилизации элементов checkbox(далее чекбоксов) на вашем сайте. При верстке сайта разработчики сталкиваются с проблемой стилизации чекбоксов, многие так же используют их не там где надо. Давайте познакомимся с этим элементов поближе.

Как организовать свой CSS?

В данной статье рассматривается структурный подход к организации CSS кода. Стоит сказать, что это лишь один из методов, которые мы применяем. Все зависит от масштаба проекта и возраста. Примеров организаций множество. Вот некоторые из них: БЭМ, OOCSS, SMACSS, Atomic CSS, MCSS, AMCSS, FUN. Каков из методов использовать решать вам.

:focus-visible здесь

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

Косые границы блоков на сайте, как будто это 2020

Макеты с диагональными сечениями довольно популярны уже несколько лет. Это не новый горячий материал , и вы, вероятно, не найдете его в статьях под названием «Тенденции дизайна на 2020 год». Но я думаю, что эта статья вам пригодится. Это инструмент, который дизайнеры и верстальщики могут использовать, чтобы придать динамику всем прямоугольным блокам со скучными углами в 90 градусов.

Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее… Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.