Modern CSS snippets. Stop writing CSS like it's 2015.

/* Add autocomplete library (Awesomplete, Typeahead, etc.) */import Awesomplete from 'awesomplete';new Awesomplete(document.querySelector('#country'),  {  list: ['Afghanistan', 'Albania', 'Algeria', ...]});/* Plus custom CSS for the dropdown */

/* Option 1: always show scrollbar (ugly on short pages) */body   {  overflow-y: scroll;}/* Option 2: hardcode scrollbar width (fragile) */body   {  padding-right: 17px;}/* scrollbar width varies by OS and browser */

.modal-content   {  overflow-y: auto;}// JS: prevent scroll chaining on wheel and touch modal.addEventListener('wheel', (e) => {   e.preventDefault(); }, { passive: false }); // also needed for touch: touchmove listener

/* Chrome + Safari only — Firefox ignores all of this */::-webkit-scrollbar   {  width: 8px;}::-webkit-scrollbar-track   {  background: #f1f1f1;}::-webkit-scrollbar-thumb   {  background: #888;}::-webkit-scrollbar-thumb:hover   {  background: #555;}

.hero   {  height: 100vh;}

// JS: check OS preference, disable animations manuallyconst mq = window.matchMedia('(prefers-reduced-motion: reduce)');if (mq.matches) {  document.querySelectorAll('.animated').forEach(    el => el.style.animation = 'none'  );}

// JS: detect support, add classif (CSS.supports('container-type', 'inline-size')) {  document.documentElement.classList.add('has-container-queries');}

// Close all on toggle, reopen the clicked onedocument.querySelectorAll('details')  .forEach(d => {    d.addEventListener('toggle', () => {      if (d.open)        others.forEach(o => o.open = false);    });  });

// JS animation library for bounce/spring easinganime({  targets: el,  translateX: 300,  easing: 'spring(1, 80, 10, 0)'});

@media (min-width: 600px) and (max-width: 1200px)   {  .card   {    grid-template-columns: 1fr 1fr;  }}

<!-- div instead of img: no alt, not semantic --><div class="card-image"></div>.card-image   {  background-image: url(photo.jpg);  background-size: cover;  background-position: center;}

/* only style after .touched class is added by JS */input.touched:invalid   {  border-color: red;}input.touched:valid   {  border-color: green;}// JS: add .touched class on blur input.addEventListener('blur', () => {   input.classList.add('touched'); });

textarea  {  overflow: hidden;}// JS: reset height then set to scrollHeight on every inputel.addEventListener('input', () => {   el.style.height = 'auto';   el.style.height = el.scrollHeight + 'px'; });

.accordion  {  overflow: hidden;}// JS: measure, set px height, then snap to autofunction open(el) {   el.style.height = el.scrollHeight + 'px';   el.addEventListener('transitionend', () => {     el.style.height = 'auto';   }, { once: true }); }

/* Multiple discrete checks */@container style(--progress: 0%)   {  .bar   {    background: red;  }}@container style(--progress: 25%)   {  .bar   {    background: orange;  }}@container style(--progress: 50%)   {  .bar   {    background: yellow;  }}/* ... repeat for every threshold *//* Or use JavaScript to set classes *//* based on the numeric value */

/* JS scroll listener approach */const header = document   .querySelector('.header');const offset = header   .offsetTop;window.addEventListener(   'scroll', () =>  {  header.classList       .toggle('stuck',      window.scrollY         >= offset);});

/* JS: read data attr and set style */document.querySelectorAll('.bar')   .forEach(el =>  {  const pct = el.dataset.pct;     el.style.width = pct + '%';     el.style.setProperty(       '--pct', pct     );});

/* Multiple class variants */.btn   {  background: gray;}.btn.primary   {  background: blue;}.btn.danger   {  background: red;}/* Plus JS to manage state */el.classList.toggle(   'primary',  isPrimary );/* Duplicated rules per variant */

// Sass / SCSS@function fluid($min, $max) {  @return clamp( /* [!code --] */    $min,    calc($min + ($max - $min) * ((100vw - 320px) / 960)),    $max  ); /* [!code --] */}

.card   {  clip-path: polygon(     0% 10%,    2% 4%,    4% 2%,    10% 0%,    /* ...16 more points */  );}/* Or use an SVG mask image */

.shape   {  clip-path: path(     'M0 200 L100 0 L200 200 Z'  );}

/* JS IntersectionObserver approach */const observer = new IntersectionObserver(   (entries) =>  {  entries.forEach(entry =>  {    const link = document         .querySelector(`a[href="# // [!code --]        ${entry.target.id}"]`);       link.classList.toggle(         'active',        entry.isIntersecting);  });},   {  threshold: 0.5});document.querySelectorAll('section')   .forEach(s =>    observer.observe(s));

.full   {  width: 100%;  width: calc(100% - 40px);}

/* Manual index per nth-child */li:nth-child(1)   {  --i: 0;}li:nth-child(2)   {  --i: 1;}li:nth-child(3)   {  --i: 2;}li:nth-child(4)   {  --i: 3;}/* … repeat for every item … */li   {  transition-delay: calc(0.1s * var(--i));}

/* JS: Swiper.js carousel with nav + dots */import Swiper from 'swiper';new Swiper('.carousel',   {  navigation:   {    nextEl: '.next',    prevEl: '.prev',  }  ,  pagination:   {    el: '.dots'  }  ,});/* + custom CSS for buttons, dots, states */

.btn   {  display: inline-flex;  align-items: center;  padding: 10px 20px;  padding-top: 8px;}

/* JS: manage hover, focus, and position */btn.addEventListener('mouseenter', () =>   {  tip.hidden = false;  positionTooltip(btn, tip);});btn.addEventListener('mouseleave', () =>   {  tip.hidden = true;});btn.addEventListener('focus', /* … */);btn.addEventListener('blur', /* … */);

<!-- Inline onclick or JS event listener --><button onclick="  document.querySelector('#dlg') // [!code --]  .showModal()"> // [!code --]  Open Dialog</button><dialog id="dlg">...</dialog>

/* JS: detect click outside dialog bounds */dialog.addEventListener('click', (e) =>  {  const rect = dialog.getBoundingClientRect();   if (e.clientX < rect.left ||      e.clientX > rect.right ||      e.clientY < rect.top ||      e.clientY > rect.bottom)  {    dialog.close();  }});

/* JS: replace native select with custom DOM */import Choices from 'choices.js';new Choices('#my-select',   {  searchEnabled: false,});/* Plus ~30 lines of custom CSS for   .choices__inner, .choices__list, etc. */

.hero   {  color: #c85032;}/* Hex, rgb(), hsl() are sRGB. Limited on wide-gamut screens. */

/* Sass: @use 'sass:color'; *//* Sass: color.adjust($brand, $lightness: 20%) */.btn   {  background: lighten(var(--brand), 20%);}

/* JS: slice text, append '...'. *//* or measure via getComputedStyle. Breaks on resize. */.card-title   {  overflow: hidden;  text-overflow: ellipsis;}/* Older: -webkit-line-clamp + -webkit-box-orient */

.drop-cap::first-letter   {  float: left;  font-size: 3em;  line-height: 1;  margin-right: 8px;}

.overlay   {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

// JavaScriptconst observer = new IntersectionObserver(  (entries) => {    entries.forEach(entry => {      if (entry.isIntersecting) {        renderContent(entry.target);      }    });  });

.menu   {  display: none;}.menu.open   {  display: block;}/* JS: toggle class, document click-outside,   keydown ESC, aria-expanded, aria-hidden */

/* JS: getBoundingClientRect for trigger + tooltip,   compute top/left, handle scroll/resize */.tooltip   {  position: fixed;  top: var(--computed-top);  left: var(--computed-left);}

.card__title   {  font-size: 1.25rem;  margin-bottom: 0.5rem;}.card__body   {  color: #444;}/* HTML: class="card__title" */

:root   {  --hue: 0;}.wheel   {  background: hsl(var(--hue), 80%, 50%);  transition: --hue .3s;  /* ignored, not interpolable */}

.icon   {  transform: translateX(10px) rotate(45deg) scale(1.2);}.icon:hover   {  transform: translateX(10px) rotate(90deg) scale(1.2);

.panel  {  transition: opacity .2s;}.panel.hidden  {  opacity: 0;  visibility: hidden;}// JS: after transition, set display:none and pointer-eventsel.addEventListener('transitionend', () => {   el.style.display = 'none'; });

.card   {  opacity: 0;  transform: translateY(10px);}.card.visible   {  opacity: 1;  transform: none;}// JS: must run after paint or transition won't run requestAnimationFrame(() => {   requestAnimationFrame(() => {     el.classList.add('visible');   });});

// barba.js or custom router transitionsimport Barba from '@barba/core';Barba.init({  transitions: [{    leave: ({ current }) => gsap.to(current.container, { opacity: 0 }),    enter: ({ next }) => gsap.from(next.container, { opacity: 0 })  }]});

// carousel.js + Slick/Swiperimport Swiper from 'swiper';new Swiper('.carousel', {  slidesPerView: 1,  loop: true});

/* HTML: manual <br> or wrapper for JS */h1   {  text-align: center;  max-width: 40ch;  /* Balance-Text.js: script + init */  /* or insert <br> in CMS/HTML */}

@font-face   {  font-family: "MyFont";  src: url("MyFont.woff2");}

@font-face   {  font-family: "MyFont";  src: url("MyFont-Regular.woff2");  font-weight: 400;}@font-face   {  font-weight: 700;  ...}@font-face   {  font-weight: 600;  ...}

@media (prefers-color-scheme: dark)   {  input, select, textarea, button   {    background: #333;    color: #eee;  }  ::-webkit-scrollbar   {    ...  }}

:root   {  --text: #111;  --bg: #fff;}@media (prefers-color-scheme: dark)   {  :root   {    --text: #eee;    --bg: #222;  }}

ul, ol   {  margin: 0;  padding-left: 1.5rem;}/* Specificity (0,0,2). Component .list { padding: 0 } loses. */

.box   {  margin-left: 1rem;  padding-right: 1rem;}[dir="rtl"] .box   {  margin-left: 0;  margin-right: 1rem;}

.header   {  grid-column: 1 / -1;}.sidebar   {  grid-column: 1;  grid-row: 2;}.main   {  grid-column: 2;  grid-row: 2;}.footer   {  grid-column: 1 / -1;  grid-row: 3;}

.parent   {  display: grid;  grid-template-columns: 1fr 1fr 1fr;}.child-grid   {  display: grid;  grid-template-columns: 1fr 1fr 1fr;}

.overlay   {  position: fixed;  inset: 0;  background: rgb(0 0 0 / .5);}/* JS: addEventListener click, keydown ESC, focus trap,   aria-hidden, body scroll lock, z-index stacking */

input[type="checkbox"]   {  appearance: none;  width: 1.25rem;  height: 1.25rem;  border: 2px solid ...;  background: ...;  border-radius: ...;}

.card h1, .card h2, .card h3, .card h4   {  margin-bottom: 0.5em;}// Same prefix repeated for every selector

button:focus   {  outline: 2px solid blue;}// Outline appears on mouse click. Often removed with outline: none.

.card .title   {  font-size: 1rem;}.page .card .title   {  font-size: 1.25rem;}.page .card .title.special   {  color: red !important;}// More selectors or !important to win

// Sass/LESS: compile-time only$primary: #7c3aed;$spacing: 16px;.btn {  background: $primary;  padding: $spacing;}

h1   {  font-size: 1rem;}@media (min-width: 600px)   {  h1   {    font-size: 1.5rem;  }}@media (min-width: 900px)   {  h1   {    font-size: 2rem;  }}

.grid   {  display: flex;}.grid > *   {  margin-right: 16px;}.grid > *:last-child   {  margin-right: 0;}

.video-wrapper   {  position: relative;  padding-top: 56.25%;}.video-wrapper > *   {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

// JavaScript: scroll listenerwindow.addEventListener('scroll', () => {  const rect = header.getBoundingClientRect();  if (rect.top <= 0)    header.classList.add('fixed');  else    header.classList.remove('fixed');});.header.fixed {  position: fixed;  top: 0;}

// scroll-reveal.jsconst obs = new IntersectionObserver(  (entries) => {    entries.forEach(e => {      if (e.isIntersecting)        e.target.classList.add('visible');    });  });document.querySelectorAll('.reveal')  .forEach(el => obs.observe(el));

// nav.scss, requires Sass compiler.nav {  display: flex;  gap: 8px;  & a {    color: blue;  }}

.card   {  display: grid;  grid-template-columns: 1fr;}@media (min-width: 768px)   {  .card   {    grid-template-columns: auto 1fr;  }}

// _variables.scss$blue: #3b82f6;$pink: #ec4899;$blend: mix($blue, $pink, 60%);

// Watch for changes, find parentdocument.querySelectorAll('input')  .forEach(input => {    input.addEventListener('invalid', () => {      input.closest('.form-group')        .classList.add('has-error');    });  });

.parent   {  position: relative;}.child   {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}