Cheatsheet - CSS

Units & Box Sizing

* {
  box-sizing: border-box;            /* Include padding and border in total width/height */
}

/* Common Units */
/* px  : Fixed physical screen pixels */
/* rem : Relative to root (<html>) font-size (1rem = 16px by default) */
/* em  : Relative to parent font-size */
/* vh  : Viewport height percentage (100vh = full height; 100dvh for dynamic mobile) */
/* vw  : Viewport width percentage */
/* %   : Percentage of containing element's dimension */

Flexbox

.container {
  display: flex;
  flex-direction: row;               /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;                   /* nowrap | wrap | wrap-reverse */
  justify-content: space-between;    /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;               /* stretch | flex-start | flex-end | center | baseline */
  gap: 16px;                         /* Spacing between items */
}

/* Flex items */
.item {
  flex: 1 1 auto;                    /* flex-grow, flex-shrink, flex-basis */
  align-self: flex-start;            /* Overrides align-items for single child */
}

/* Perfect centering shortcut */
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  grid-template-rows: auto;
  gap: 20px;
}

/* Item placement */
.grid-item-span2 {
  grid-column: span 2;
  grid-row: span 1;
}

Positioning

.element {
  position: static;                  /* Default flow */
  position: relative;                /* Positioned relative to normal position */
  position: absolute;                /* Positioned relative to closest non-static ancestor */
  position: fixed;                   /* Fixed relative to viewport (stays on scroll) */
  position: sticky;                  /* Toggles between relative and fixed based on scroll */
  top: 0;
  left: 0;
  z-index: 10;
}

Responsive Media Queries

/* Mobile-first breakpoints */
@media (min-width: 640px) {
  /* Tablets / small screens */
}

@media (min-width: 1024px) {
  /* Desktops */
}

@media (prefers-color-scheme: dark) {
  /* System dark mode */
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

Selectors & Pseudo-classes

/* Combinators */
div > p      { }                     /* Direct child */
div + p      { }                     /* Adjacent sibling (immediately following) */
div ~ p      { }                     /* General sibling */

/* Pseudo-classes */
a:hover      { }
button:focus-visible { }             /* Accessible keyboard focus ring */
button:active { }
tr:nth-child(odd) { }                /* Zebra striping */
li:first-child { }
li:last-child  { }
input:disabled { }
:is(h1, h2, h3) { }                  /* Matches any of the selectors */
:not(.active) { }                    /* Negation */

Transitions & Animations

.btn {
  transition: all 0.2s ease-in-out;
  transition-property: background-color, transform;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Keyframe animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.modal {
  animation: fadeIn 0.3s ease-out forwards;
}

Text Truncation & Clamp

/* Single-line ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}