CSS only components

Modern CSS has become so powerful that the basic layout can be styled without using third-party tools. And simple user interface templates can be described using pure CSS. Let's look at an example in which we will try to create a simple CSS component, organizing it in the manner of React. Initial styles Let's imagine that we are describing a button group component that defines both its own and nested button styles, including for :hover and :active states: .btn { width : calc ( 100% * var ( --offset ) / 2 ); border-radius : calc ( 1rem * ( var ( --offset ) - 1 )); background-color : var ( --neutral-color ); } .btn-group { display : flex ; gap : 0.25rem ; margin : 1rem 0 ; & > * { flex : 1 1 auto ; padding : 0.5rem ; background : oklch ( from currentColor 0.8 calc ( c / 4 ) h / 0.2 ); border : none ; cursor : pointer ; transition : all 100ms ease-in 0s ; transition-property : background translate box-shadow ; &:hover { background : oklch ( from currentColor 0.8 calc ( c / 4 ) h / 0.6 );