Xây dựng mẫu trang ngữ nghĩa trực quan bằng vùng lưới có tên: bố cục CSS dễ đọc và dễ bảo trì

Bài hướng dẫn CSS grid template areas này cho thấy cách các vùng có tên giúp bố cục trang trở nên dễ đọc cả trong mã HTML lẫn stylesheet. Thay vì chỉ nghĩ theo cột và hàng, bạn có thể đặt tên cho từng phần của trang, gán chúng vào một mẫu lưới và sắp xếp lại bố cục ở các kích thước màn hình khác nhau. Kết quả là một cách tiếp cận trực quan để dàn trang nhưng vẫn tôn trọng thứ tự tài liệu và khả năng tiếp cận.

Tại sao vùng có tên giúp cải thiện mẫu trang

Trang web có hình dạng nhờ mối quan hệ giữa cấu trúc và vị trí. HTML mô tả ý nghĩa của từng khu vực; CSS quyết định những khu vực đó xuất hiện ở đâu. Vùng lưới có tên (grid template areas) kết nối hai mối quan tâm này bằng cách đặt tên cho các vùng như header, nav, main, aside và footer.

Những tên gọi này hoạt động như nhãn trên bản vẽ thiết kế. Bạn có thể thấy trực tiếp bố cục dự kiến ngay trong khai báo và có thể thay đổi bố cục mà không cần viết lại mọi bộ chọn con. Điều này đặc biệt hữu ích khi mẫu trang phải phát triển theo nội dung, điều hướng hoặc yêu cầu thiết kế thay đổi.

Bắt đầu với mã HTML có ý nghĩa

Hãy dùng các phần tử mô tả vai trò của từng vùng. Một tài liệu điển hình có thể chứa header, nav, phần tử main với article, aside và footer. Hãy giữ thứ tự đọc hợp lý trước khi nghĩ đến cách hiển thị trực quan. Grid có thể di chuyển các vùng về mặt thị giác, nhưng không nên dùng nó để che giấu một cấu trúc tài liệu khó hiểu.

Gán cho mỗi phần tử con trực tiếp của container lưới một móc neo ổn định. Một class hoặc ID là đủ; điều quan trọng là mỗi vùng có thể được gán vào một vùng có tên mà không phụ thuộc vào bộ chọn vị trí dễ gãy.

Tạo container lưới

Phần tử cha chứa các vùng sẽ trở thành container lưới. Một mẫu đơn giản cho màn hình desktop có thể dùng ba cột: một dải điều hướng hẹp, một cột nội dung linh hoạt và một cột bổ trợ. Các hàng có thể để ngầm định, cho phép nội dung quyết định chiều cao, hoặc được định kích thước rõ ràng khi thiết kế cần các rãnh có thể dự đoán.

.page {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr) minmax(14rem, 22rem);
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "nav    main   footer";
  gap: 1rem;
  max-width: 80rem;
  margin-inline: auto;
}

Phần hữu ích nhất là cách bố trí bằng chuỗi ký tự: mỗi hàng được đặt trong dấu ngoặc kép, mỗi ô chứa tên một vùng, và tên lặp lại sẽ tạo thành vùng lớn hơn. Vùng nav trải dài hai hàng, trong khi main vẫn là cột trung tâm cao. Mẫu này đọc giống như một bản đồ thu nhỏ của trang.

Gán phần tử con vào vùng

Khi container đã định nghĩa các tên, mỗi phần tử con sẽ nhận một vùng bằng thuộc tính grid-area. Cách này giữ quy tắc đặt vị trí gần với vai trò của phần tử.

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

Lưu ý rằng các quy tắc không đề cập đến cột hay hàng. Chúng chỉ kết nối một phần tử ngữ nghĩa với một vùng có tên. Nếu mẫu thay đổi, các phép gán này vẫn có thể giữ nguyên.

Sắp xếp lại theo responsive mà không làm đổi ý nghĩa

Thiết kế responsive thường đòi hỏi ưu tiên hiển thị khác nhau. Trên màn hình rộng, điều hướng có thể nằm cạnh bài viết và aside có thể cung cấp liên kết liên quan. Trên màn hình hẹp, các vùng đó có thể cần xếp chồng theo trình tự dễ đọc.

Hãy định nghĩa một mẫu mới tại điểm ngắt (breakpoint) thay vì di chuyển phần tử bằng các độ lệch dễ gãy. Ví dụ, mẫu cho di động có thể đặt header trước, tiếp theo là điều hướng, nội dung chính thứ ba, phần bổ trợ thứ tư và footer cuối cùng. Tên các vùng vẫn giữ nguyên, vì vậy phép gán của phần tử con không cần thay đổi.

@media (max-width: 48rem) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}

Đây là cách sắp xếp lại theo responsive với một quy tắc rõ ràng: thay đổi bản đồ, không thay đổi ý nghĩa. DOM có thể giữ thứ tự hợp lý cho người dùng bàn phím và trình đọc màn hình trong khi lưới trình bày cách sắp xếp trực quan khác khi có đủ không gian.

Dùng đường lưới có tên khi vùng cần canh biên chính xác

Vùng có tên rất lý tưởng cho các khu vực, nhưng đôi khi một thành phần cần căn chỉnh theo một biên cụ thể. Grid cũng hỗ trợ đường lưới có tên, chẳng hạn như content-start và content-end. Bạn có thể kết hợp cả hai kỹ thuật: dùng vùng cho bản đồ trang và đường có tên để căn chỉnh nội bộ.

Hãy giữ vốn từ vựng gọn nhẹ. Quá nhiều tên khiến mẫu khó quét nhìn, trong khi một tập tên nhất quán giúp việc xem xét các thay đổi sau này dễ dàng hơn.

Xử lý nội dung không nên co giãn quá mức

Các rãnh lưới có thể được định cỡ bằng minmax để ngăn cột hẹp bị sụp đổ hoặc cột rộng trở nên khó đọc. Một rãnh giữa linh hoạt với ngưỡng tối thiểu hợp lý giúp đoạn văn dài vẫn dễ đọc trong khi các vùng bên vẫn gọn.

Khi một vùng chứa nội dung dày đặc, hãy cân nhắc dùng lưới lồng nhau hoặc bố cục flex bên trong vùng đó. Mẫu bên ngoài kiểm soát bố cục tổng thể của trang; bố cục bên trong kiểm soát chi tiết của thẻ, danh sách điều hướng hoặc phần bài viết.

Giữ khả năng tiếp cận trong thiết kế

Thứ tự hiển thị và thứ tự logic không nhất thiết phải giống hệt nhau, nhưng chúng không nên mâu thuẫn theo cách gây bất ngờ cho người dùng bàn phím. Hãy kiểm tra thứ tự focus sau mỗi thay đổi responsive. Tránh dùng vị trí lưới để di chuyển một điều khiển tương tác ra xa nhãn hoặc hướng dẫn liên quan của nó.

Đồng thời đảm bảo các vùng có tên tương ứng với các landmark thực sự. Vùng điều hướng n��n chứa nội dung điều hướng, và vùng main nên chứa nội dung chính của tài liệu. Tên rõ ràng trong CSS có giá trị nhất khi chúng phản ánh vai trò rõ ràng trong HTML.

Duy trì mẫu như một hệ thống

Hãy coi mẫu lưới như một hệ thống thiết kế nhỏ. Ghi lại ý nghĩa của từng vùng, giữ quy ước đặt tên nhất quán và xác định các điểm ngắt nơi bố cục thay đổi. Khi thêm vùng mới, hãy quyết định xem nó thuộc về bản đồ hiện có hay cần cấu trúc hàng và cột mới.

Vì mẫu được tập trung ở một nơi, việc xem xét thay đổi trở nên dễ dàng hơn. Người thiết kế có thể điều chỉnh cách sắp xếp trên desktop, lập trình viên có thể cập nhật trình tự trên di động, và cả hai thay đổi vẫn hiển thị rõ ràng trong một khai báo dễ đọc.

Quy trình thực hành

Bắt đầu với HTML ngữ nghĩa và thứ tự đọc hợp lý. Xây dựng mẫu desktop với các vùng có tên, gán phần tử con theo vai trò và xác minh mỗi vùng có đủ không gian. Thêm điểm ngắt và định nghĩa mẫu thứ hai cho màn hình nhỏ hơn. Kiểm tra focus bàn phím, khả năng thu phóng và nội dung dài trước khi tinh chỉnh kích thước rãnh.

Cuối cùng, hãy loại bỏ các quy tắc không cần thiết. Nếu một vùng đã có tên ổn định và phép gán rõ ràng, các ghi đè vị trí thường là dấu hiệu cho thấy mẫu cần một bản đồ tốt hơn thay vì thêm nhiều ngoại lệ.

Kết luận

Vùng lưới có tên biến bố cục thành một ngôn ngữ trực quan và dễ bảo trì. Bạn có thể mô tả trang như một tập hợp các vùng ngữ nghĩa, sắp xếp lại chúng cho các khung nhìn khác nhau và vẫn giữ nguyên cấu trúc tài liệu bên dưới. Cách tiếp cận này điềm tĩnh, rõ ràng và phù hợp với các mẫu cần giữ sự dễ hiểu khi trang web phát triển.