css

Pseudo-classes select elements based on state like :hover, :focus, :active, and :visited. I use :nth-child() and :nth-of-type() for pattern-based selection. The :first-child, :last-child, and :only-child target specific positions. Form pseudo-classes

Tailwind CSS provides utility-first styling that pairs perfectly with Rails component-driven architecture. I configure Tailwind to scan templates for class names and generate only the CSS being used. The standalone CLI runs during development with --w

CSS custom properties define reusable values with --variable-name syntax and access with var(--variable-name). I scope variables at :root for global access or within selectors for local scope. Variables cascade and inherit unlike preprocessor variable

Turbo includes a progress bar at the top of the page, and it’s a surprisingly visible part of perceived quality. I like to set the color and height to match the app’s brand. This is pure CSS: target .turbo-progress-bar. You can also make it slightly t

Flexbox provides one-dimensional layout for rows or columns. I use display: flex on containers to enable flexbox. The flex-direction property controls main axis direction (row, column, row-reverse, column-reverse). The justify-content property aligns

CSS transitions animate property changes with transition: property duration timing-function delay. I use transition-property to specify which properties animate. The timing-function controls acceleration with values like ease, ease-in, ease-out, cubic

Container queries enable responsive components based on container size using @container at-rule. I set container-type: inline-size to create query containers. The @container (min-width: 400px) queries container width instead of viewport. Named contain

CSS Grid provides two-dimensional layout control for rows and columns simultaneously. I use display: grid to create grid containers. The grid-template-columns and grid-template-rows properties define track sizes. The fr unit distributes available spac

CSS specificity determines which styles apply when multiple rules target the same element. I calculate specificity as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Inline styles have highest specificity at 1000. ID select

Media queries adapt layouts to different screen sizes using @media rules with breakpoints. I use mobile-first approach starting with base mobile styles and progressively enhancing with min-width queries. Common breakpoints are 640px (sm), 768px (md),

BEM (Block Element Modifier) naming uses .block__element--modifier pattern for scalable CSS. I define blocks as independent components like .card. Elements within blocks use .card__title and .card__body. Modifiers indicate variations with .card--featu

Responsive design adapts layouts to different screen sizes. I use media queries with @media to apply styles conditionally based on viewport width. Mobile-first approach starts with mobile styles, then adds desktop features. Breakpoints at common devic