10 современных возможностей CSS, которые стоит использовать

Точно так же, как и JavaScript, CSS не пользуется наилучшей репутацией среди (Rails)-разработчиков. И, как и в случае с JavaScript (вспомните Turbo, а также CoffeeScript), у CSS длинная история препроцессоров, постпроцессоров и различных абстракций (например, Tailwind CSS).

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

Но на дворе 2025 год, и CSS развивается (и будет развиваться!) очень быстрыми темпами. Позади остались времена spacer.gif или создания изображений для каждого угла карточки, чтобы имитировать скруглённые границы.

Если вы какое-то время пренебрегали CSS (например, потому что пользовались Tailwind CSS), ниже я хочу выделить несколько новых возможностей CSS, которые я с удовольствием применяю в некоторых проектах (созданных под эгидой Rails Designer и не только). Хотя я всё ещё люблю использовать Tailwind CSS, понимание и реальное использование самого CSS - крайне важно. Веб строится на (открытых) стандартах, что необходимо для его доступности, поддерживаемости и долгосрочной актуальности.


Min, max and clamp

min()

Соединяя их вместе, так как они перекрываются

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

Думайте о min() как об установке верхнего предела. Оно выберет меньшее из значений. Удобно для того, чтобы элементы не становились слишком большими, при этом оставаясь адаптивными. То есть, пока 90% вычисляется как меньше 300px - используется 90%. Как только результат превышает 300px - используется это значение.

max()

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

https://railsdesigner.com/modern-css-overview/

👉 @frontend_1

CSS-совет 💡

Нет необходимости создавать отдельные версии логотипа в градациях серого для тёмного и светлого режимов.

Это легко делается с помощью CSS-фильтров

👉 @frontend_1