15 Mẹo Giúp Viết CSS Hiện Đại, Gọn Gàng và Chuyên Nghiệp

+----------------------------+
|        Margin (lề)         |
|  +----------------------+  |
|  |     Border (viền)    |  |
|  |  +----------------+  |  |
|  |  | Padding (đệm)  |  |  |
|  |  | +----------+   |  |  |
|  |  | | Content  |   |  |  |
|  |  | +----------+   |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+----------------------------+

<div class="box">Xin chào!</div>

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
  background-color: lightyellow;
}

* {
  box-sizing: border-box; /* padding và border sẽ không làm tăng kích thước */
}

.box-modern {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  box-sizing: border-box; /* Tổng chiều rộng chỉ là 200px */
}

/* Thêm outline để debug layout mà không ảnh hưởng box model */
* {
  outline: 1px solid red !important;
}

/* Hoặc dùng này để thấy tất cả elements */
* {
  background-color: rgba(255,0,0,.2) !important;
  outline: 1px solid red !important;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.container {
  display: flex;
  justify-content: center; /* căn giữa theo chiều ngang */
  align-items: center;      /* căn giữa theo chiều dọc */
  height: 200px;
  border: 1px solid black;
}
.item {
  padding: 20px;
  background: lightblue;
}

.flex-container {
  display: flex;
  
  /* Main Axis (trục chính) - mặc định là horizontal */
  justify-content: space-between; /* space-around, space-evenly, flex-start, flex-end */
  
  /* Cross Axis (trục phụ) - mặc định là vertical */  
  align-items: stretch; /* flex-start, flex-end, center, baseline */
  
  /* Đổi hướng */
  flex-direction: row; /* row-reverse, column, column-reverse */
  
  /* Xuống hàng khi cần */
  flex-wrap: wrap; /* nowrap, wrap-reverse */
}

.flex-item {
  flex: 1; /* Viết tắt của: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  
  /* Hoặc chi tiết hơn */
  flex-grow: 2;    /* Chiếm 2 phần trong không gian còn lại */
  flex-shrink: 1;  /* Có thể co lại khi cần */
  flex-basis: 100px; /* Kích thước ban đầu */
}

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 cột: cột giữa lớn gấp đôi */
  gap: 10px;
}
.item {
  background-color: lightgreen;
  padding: 10px;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive không cần media query */
  grid-template-rows: auto 1fr auto; /* header, main, footer */
  gap: 1rem;
  
  /* Đặt tên cho lines */
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Grid item positioning */
.special-item {
  grid-column: 1 / 3; /* Từ cột 1 đến cột 3 */
  grid-row: 2 / 4;    /* Từ hàng 2 đến hàng 4 */
}

.title {
  font-size: clamp(16px, 5vw, 32px); /* nhỏ nhất 16px, lớn nhất 32px */
}

.container {
  width: min(90vw, 1200px); /* Nhỏ hơn trong 90vw và 1200px */
  padding: max(1rem, 5vw); /* Lớn hơn trong 1rem và 5vw */
}

.responsive-spacing {
  margin: clamp(1rem, 5vw, 3rem);
  padding: clamp(0.5rem, 2vw, 2rem);
}

/* Modern responsive typography */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: clamp(1.4, 1.5vw + 1rem, 1.8);
}

.modern-units {
  /* Viewport units */
  height: 100vh;  /* 100% viewport height */
  width: 100vw;   /* 100% viewport width */
  height: 100dvh; /* Dynamic viewport height (mobile-friendly) */
  
  /* Container query units - CSS2023 */
  width: 50cqw;   /* 50% container query width */
  height: 30cqh;  /* 30% container query height */
  
  /* Relative units */
  font-size: 1rem;  /* Relative to root font-size */
  width: 10ch;      /* Width of 10 characters */
  height: 3ex;      /* Height of 3 x-heights */
}

<div class="error-message-important-red-text">Oops!</div>

<div class="🔥">Oops!</div>

.🔥 {
  color: red;
  font-weight: bold;
}

<div class="video-preview"></div>

.video-preview {
  aspect-ratio: 16 / 9; /* giữ tỉ lệ 16:9 */
  background-color: black;
  width: 100%;
}

<div class="image-container">
  <img src="image.jpg" alt="Sample image" />
</div>

.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop ảnh để vừa khung */
  object-position: center; /* Căn giữa phần được crop */
}

/* Aspect ratio khác */
.square { aspect-ratio: 1; }
.portrait { aspect-ratio: 3 / 4; }
.ultrawide { aspect-ratio: 21 / 9; }

:root {
  --main-color: #4CAF50;
  --spacing: 16px;
}

.button {
  background: var(--main-color);
  padding: var(--spacing);
}

.box {
  width: calc(var(--spacing) * 2);
}

.sidebar {
  width: calc(100vw - 200px);
}

.card {
  animation-delay: calc(var(--index) * 0.2s);
}

<ol class="steps">
  <li>Bắt đầu</li>
  <li>Chạy</li>
  <li>Về đích</li>
</ol>

.steps {
  counter-reset: step; /* khởi tạo bộ đếm */
}

.steps li {
  counter-increment: step; /* tăng mỗi lần gặp li */
  list-style: none;
}

.steps li::before {
  content: "Bước " counter(step) ": ";
  font-weight: bold;
}

Bước 1: Bắt đầu
Bước 2: Chạy
Bước 3: Về đích

<div class="dropdown">
  <input type="text" placeholder="Nhập gì đó..." />
  <div class="menu">Gợi ý A<br/>Gợi ý B</div>
</div>

.dropdown .menu {
  display: none;
}

.dropdown:focus-within .menu {
  display: block;
  background: #eee;
  padding: 10px;
}

display: -webkit-box;
display: -ms-flexbox;
display: flex;

npm install -D autoprefixer postcss

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {}
  }
}

/* Thay vì dùng physical properties */
.old-way {
  margin-left: 1rem;
  margin-right: 2rem;
  border-left: 2px solid red;
  text-align: left;
}

/* Dùng logical properties */
.new-way {
  margin-inline-start: 1rem;  /* margin-left trong LTR, margin-right trong RTL */
  margin-inline-end: 2rem;    /* margin-right trong LTR, margin-left trong RTL */
  border-inline-start: 2px solid red;
  text-align: start;          /* left trong LTR, right trong RTL */
}

/* Logical properties cho block direction */
.block-direction {
  margin-block-start: 1rem;   /* margin-top */
  margin-block-end: 2rem;     /* margin-bottom */
  padding-block: 1rem;        /* padding-top và padding-bottom */
  padding-inline: 2rem;       /* padding-left và padding-right */
}

/* :is() - Nhóm selectors */
/* Thay vì viết: */
.header h1, .header h2, .header h3 { color: blue; }
.sidebar h1, .sidebar h2, .sidebar h3 { color: blue; }

/* Viết ngắn gọn: */
:is(.header, .sidebar) :is(h1, h2, h3) { 
  color: blue; 
}

/* :where() - Giống :is() nhưng specificity = 0 */
:where(.card, .widget) h2 {
  margin-top: 0; /* Dễ override */
}

/* :not() với nhiều selector */
button:not(.disabled, .loading, .ghost) {
  background: blue;
}

/* :has() - Parent selector (CSS2023) */
.card:has(img) {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.article:has(h2) .read-time {
  display: block; /* Chỉ hiện read-time nếu có h2 */
}

/* Container queries */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ✅ GOOD - Chỉ animate properties này để có 60fps */
.smooth-animation {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.smooth-animation:hover {
  transform: translateY(-5px) scale(1.05);
  opacity: 0.9;
}

/* ❌ BAD - Làm browser repaint/reflow */
.laggy-animation {
  transition: width 0.3s, height 0.3s, top 0.3s;
}

/* Custom easing với cubic-bezier */
.custom-ease {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* CSS Animation với keyframes */
@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideInUp 0.6s ease-out;
  animation-fill-mode: both; /* Giữ trạng thái cuối */
}

/* Staggered animation với CSS Variables */
.stagger-item {
  animation: slideInUp 0.6s ease-out;
  animation-delay: calc(var(--index) * 0.1s);
  animation-fill-mode: both;
}

/* Tôn trọng người dùng muốn giảm animation */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}