Biến cho token thiết kế

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 3 trên 35.

Giờ bạn đã biết cách tạo và sử dụng biến CSS, hãy cùng xem chúng giúp tổ chức thiết kế như thế nào.

Design token là các biến CSS đặc biệt lưu trữ màu sắc, phông chữ, khoảng cách và những giá trị kiểu dáng chính khác của trang web.

Sử dụng design token giúp bạn giữ các kiểu dáng nhất quán và dễ cập nhật. Chỉ cần thay đổi token một lần, toàn bộ trang web sẽ phản ánh thay đổi đó!

Dưới đây là cách tạo biến CSS cho các token thiết kế:

:root {
  /* Màu sắc */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  
  /* Khoảng cách */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  
  /* Kiểu chữ */
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Ở đây, chúng ta áp dụng các token thiết kế này cho các phần tử:

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-medium);
}

.card {
  border: 1px solid var(--secondary-color);
  margin: var(--spacing-medium);
  padding: var(--spacing-large);
}

Sử dụng token thiết kế giúp giao diện trang web nhất quán và dễ cập nhật hơn.

Thử thách

Dễ

Bạn có một trang gồm các bài viết về thực phẩm lành mạnh và một số kiểu có sẵn. Nhiệm vụ của bạn là cải thiện trang bằng cách sử dụng biến CSS.

Bên trong bộ chọn :root, tạo một biến có tên --color-secondary và đặt giá trị của nó thành màu cam ấm: #f39c12.
Bên trong bộ chọn :root, tạo một biến có tên --spacing-medium và đặt giá trị của nó thành 16px.
Dùng --color-secondary để đặt màu văn bản cho tất cả phần tử <h2>.
Dùng --spacing-medium để đặt phần đệm cho phần tử <section>.

Tự làm thử

<html>
<head>
    <title>Design Tokens</title>
    <style>
      /* Design tokens: colors, fonts, spacing */
      :root {
        --color-primary: #27ae60;  
        --color-text: #2c3e50;      
        --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --spacing-small: 8px;
        --spacing-large: 24px;
        --border-radius: 8px;
        --bg-light: #e8f5e9;          
      }
    
      body {
        font-family: var(--font-base);
        color: var(--color-text);
        background: var(--bg-light);
        margin: 0;
        padding: var(--spacing-large);
        line-height: 1.5;
      }
    
      header {
        text-align: center;
        margin-bottom: var(--spacing-large);
      }
    
      header h1 {
        color: var(--color-primary);
        margin-bottom: 0.2em;
      }
    
      header p {
        font-size: 1.1rem;
        color: #4a6a4a;
      }
    
      section {
        max-width: 700px;
        margin: 0 auto;
        background: white;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
    
      h2 {
        margin-top: 0;
      }
    
      article {
        margin-bottom: var(--spacing-large);
      }
    
      article:last-child {
        margin-bottom: 0;
      }
    
      .btn {
        display: inline-block;
        background-color: var(--color-primary);
        color: white;
        border: none;
        padding: var(--spacing-small) var(--spacing-small);
        border-radius: var(--border-radius);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
      }
    
      .btn:hover {
        background-color: #1e8449;
      }
    </style>
    </head>
    <body>
    
    <header>
      <h1>Eat Healthy, Feel Great!</h1>
      <p>Your guide to nutritious and delicious foods.</p>
    </header>
    
    <section>
      <article>
        <h2>Avocados</h2>
        <p>Rich in healthy fats and fiber, avocados support heart health and keep you full longer.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Quinoa</h2>
        <p>A complete protein source, quinoa is great for vegetarians and provides essential amino acids.</p>
        <button class="btn">Learn More</button>
      </article>

      <article>
        <h2>Blueberries</h2>
        <p>Packed with antioxidants and vitamins, blueberries promote brain health and fight inflammation.</p>
        <button class="btn">Learn More</button>
      </article>
    </section>
</body>
</html>