Tạo một website ổn với lượng CSS tối thiểu (2023)

(thecascade.dev)

6 điểm bởi GN⁺ 2025-10-07 | 1 bình luận | Chia sẻ qua WhatsApp

Nhiều lập trình viên gặp phải những vấn đề không cần thiết vì thiết kế CSS quá mức
Chỉ với một lượng style toàn cục tối thiểu cũng có thể tạo ra trang đủ gọn gàng và phản hồi tốt
Chỉ cần giới hạn kích thước và hiển thị dạng block cho ảnh, SVG, video là có thể giải quyết các vấn đề bố cục cơ bản
Có thể cải thiện khả năng đọc bằng font system-ui, giãn dòng phù hợp và giới hạn độ rộng tối đa của đoạn văn
Cần áp dụng thuộc tính color scheme để phản ánh các tùy chọn môi trường như dark mode của hệ điều hành

Tạo một website ổn với lượng CSS tối thiểu

Vấn đề của CSS quá mức và cách tiếp cận

Nhiều người khi làm website thường thiết kế CSS phức tạp quá mức
Chỉ với CSS tối thiểu cũng có thể tạo ra một trang phản hồi tốt, đủ tinh tế và bám sát những điều cơ bản

HTML cơ bản và xử lý hình ảnh

Chỉ cần viết HTML cơ bản là website đã có khả năng phản hồi cơ bản
Do ảnh có thể gây ra vấn đề tràn bố cục, hãy áp dụng CSS dưới đây
```
img {
  max-width: 100%;
  display: block;
}
```
Nếu SVG, video gặp vấn đề tương tự, có thể mở rộng như sau
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Cải thiện typography

Font mặc định của trình duyệt dễ tạo cảm giác thiếu điểm nhấn về mặt thiết kế
Có thể dùng system-ui làm font family để áp dụng kiểu chữ mặc định phù hợp với từng nền tảng
Kích thước font và giãn dòng mặc định thường hơi nhỏ, vì vậy nên dùng thiết lập sau
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Chỉ với thiết lập này cũng đã cải thiện đáng kể so với mặc định của trình duyệt

Hỗ trợ dark mode

Vì nhiều người dùng thích dark mode, nên việc áp dụng thuộc tính color-scheme để đi theo thiết lập của hệ điều hành là rất hữu ích
```
html {
  color-scheme: light dark;
}
```
Thuộc tính này thiết lập để user agent style tự động phản ánh theme hệ thống được ưu tiên
Cũng có thể chỉ định bằng thuộc tính ngay trên thẻ HTML
```
<html lang="en" color-scheme="light dark"></html>
```
Ngoài giá trị ưu tiên của hệ thống, việc cho phép tự chọn color scheme cũng là một best practice tốt

Giới hạn độ rộng nội dung

Độ dài của đoạn nội dung là yếu tố rất quan trọng ảnh hưởng đến khả năng đọc
Thông thường, lý tưởng nhất là mỗi dòng phần thân bài hiển thị trong khoảng 45~90 ký tự
Có thể cải thiện khả năng đọc của đoạn văn bằng cách giới hạn độ rộng tối đa của phần tử main như sau
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
Hàm min() sẽ chọn giá trị nhỏ hơn giữa 70ch và 100% - 4rem
margin-inline: auto giúp căn giữa theo chiều ngang
Khi cần, có thể dùng class .container hoặc .wrapper thay cho main

Ví dụ CSS tối thiểu cuối cùng

Tổng hợp các nội dung trên, có thể xây dựng một website ổn định với bộ CSS tối thiểu như sau

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Kết luận và khả năng mở rộng

Ví dụ trên có thể dùng ngay như một điểm khởi đầu nhẹ nhàng hoặc cho các trang nhỏ
Trong đa số trường hợp, nên mở rộng bằng cách thêm các style bổ sung trên nền tảng này

1 bình luận

GN⁺ 2025-10-07

Ý kiến trên Hacker News

Bài này đã cũ, nhưng vẫn là một bài tổng hợp lý do vì sao ở một số khu vực, việc không khuyến nghị system ui font family vẫn còn đúng
https://infinnie.github.io/blog/2017/systemui.html
- Nội dung bài viết khá thú vị, nhưng ligature st của font xấu quá nên tôi không muốn nhận lời khuyên về font từ trang đó
Thành thật mà nói tôi không hiểu lắm. Tôi hiểu là họ muốn tạo một trang web tối giản, dễ đọc. Nhưng những cách cần làm cho việc đó chẳng phải đã khá phổ biến rồi sao. Tôi tự hỏi người dùng mục tiêu phải vật lộn với mấy thứ này là ai. Cũng không hiểu vì sao nội dung này lại nổi trên HN
- Là tôi đây. Tôi chủ yếu là lập trình viên backend, thỉnh thoảng làm frontend cho các side project, nhưng gần như không biết CSS. Với tôi thì mấy cách này không hề là kiến thức “ai cũng biết”. Tôi luôn thấy khó vì không biết CSS
- Những người còn chật vật chỉ với một dòng max-width? Mục tiêu là tất cả những ai đang làm homepage cá nhân

font-family: System UI;

Cái này sai. Cú pháp đúng là

font-family: system-ui;

Tác giả có viết đúng ở vài ví dụ khác, nhưng lại viết sai ở ví dụ đầu tiên nên dễ gây nhầm lẫn

Tôi thắc mắc nếu tên font gồm hai từ thì có cần đặt trong dấu ngoặc kép không. Ví dụ như

font-family: Times New Roman;

kiểu thế này. Vì cả times lẫn Times New Roman đều chạy không cần dấu ngoặc, nên tôi không rõ đó là vì đây là font cũ được xử lý ngoại lệ, hay vì CSS khá thoáng trong việc khớp tên

https://meyerweb.com/eric/tools/css/reset/
Cái này, tôi chỉ muốn gọi là cache money
- Eric Meyer là huyền thoại của giới CSS. Năm 2002, khi tôi chưa hiểu box model, tôi đã hiểu ra nhờ phần giải thích của ông ấy
  https://meyerweb.com/eric/books/
- Tôi thấy cái này khá thường xuyên, nhưng bằng cách nào đó nó tạo cảm giác hơi kỳ, không hợp mắt tôi. Nó không đủ đơn giản, cũng không đủ hiện đại/tối giản. Bản thân chữ cũng có vẻ không dễ đọc. Có thể chỉ là gu cá nhân của tôi thôi
- Stylesheet reset CSS là điểm khởi đầu của sự ô nhiễm style. Cách tiếp cận kiểu Kevin Powell, tức tôn trọng style mặc định của trình duyệt, tốt hơn. Vẫn cần test đa trình duyệt, nhưng gần 20 năm nay reset CSS cứ mặc nhiên đi theo, rồi lại chồng thêm framework lên trên nên chỉ làm tăng độ phức tạp. Giờ đây với CSS Grid hiện đại, biến số và nhiều thứ khác, ta có thể rời bỏ lối cũ để tiếp cận sáng tạo hơn nhiều. Ngày xưa tôi ghét CSS vì đầy mẹo vặt và workaround, nhưng giờ nó giống như lắp Lego khớp hoàn hảo. Reset CSS giờ không còn là thứ bắt buộc nữa, mà chỉ là công cụ hỗ trợ để bớt sợ hãi. CSS pre-processor giờ cũng không còn quá cần thiết
Đây là câu hỏi xin gợi ý SSG (static site generator) cho một website học thuật tối giản, đơn giản. Astro và Hugo là các lựa chọn, nhưng Astro có vẻ quá phức tạp, còn tự viết html/css thì bất tiện ở phần layout và tùy biến. Theme Astro cũng không hợp lắm cho blog cá nhân, đa phần là cho doanh nghiệp hoặc quá hào nhoáng. Nghĩ vậy mới lại thấy ngạc nhiên vì sao việc thiết kế website giờ lại trở nên khó đến thế. Không rõ các lập trình viên web theo kịp dòng chảy này bằng cách nào, với framework, component và vô số dependency
- Tôi gợi ý Eleventy(https://11ty.dev/) hoặc Zola(https://getzola.org/). Cả hai đều là công cụ tương đối mới và có nhiều người dùng rất giỏi
- Đó là độ phức tạp tự nhiên của hệ thống web. Không thể giữ được sự đơn giản mãi. Dù vậy, tôi vẫn biết ơn các tiêu chuẩn mở và framework có thể dùng mà không cần giấy phép. Chỉ là có quá nhiều lựa chọn nên dễ bị tê liệt vì lựa chọn
- Chính những cuộc thảo luận như thế này đang che đi sự đáng xấu hổ của web hiện đại. Ngoài các dịch vụ web lớn như Facebook thì hầu như không còn gì có giá trị, điều đó thật đáng buồn
- Có thể bạn không cần thêm lựa chọn đâu, nhưng franklin.jl rất hợp về mặt xử lý toán, code inline và sự gọn gàng
Bản thân website này đang dùng nhiều CSS hơn hẳn so với những gì bài viết đề xuất. Ước chừng hơn 300 dòng. Dù vậy, để lấy mốc khởi đầu thì cũng ổn
- Cảm ơn vì đã kiểm tra điều đó trên di động. Chỉ riêng chuyện này cũng làm độ tin cậy của trang đó giảm đi với tôi. Tôi sẽ tự kiểm tra sau. Dù vậy vẫn hy vọng họ áp dụng tốt các kỹ thuật mà họ giới thiệu
Khi thấy gợi ý “hãy giới hạn chiều rộng nội dung để tăng khả năng đọc”, tôi lại mong là đừng làm thế. Dù nghiên cứu về tính khả dụng có nói gì thì tôi vẫn thích chiều rộng lớn. Chỉ cần chỉnh kích thước trình duyệt là đã có thể kiểm soát độ rộng nội dung rồi
- Khi chỉnh kích thước trình duyệt thì cả cửa sổ cũng bị thu nhỏ theo, nên thực ra chỉ thêm bất tiện. Ví dụ, để đưa đoạn văn bản 80 cột đang dính sát mép trái vào giữa, bạn phải liên tục đổi kích thước trình duyệt, cực kỳ phiền. Khó chịu đến mức đôi khi tôi còn tự ghi đè stylesheet của trang. Có lúc tôi thấy thà xem văn bản thuần còn hơn. Hoặc chuyển sang reader mode để đọc
- Gần như tất cả người quen của tôi, dù dân tech hay không, đều luôn mở vô số tab. Xác suất mỗi tab chỉ có đúng một dòng văn bản là 0%. Cảm giác như thà in ra bằng máy in ma trận điểm rồi đọc còn đỡ hơn việc cứ phải chỉnh lại kích thước cửa sổ. Nói hơi cường điệu một chút
- Nội dung văn xuôi thì hợp hơn khi có giới hạn chiều rộng. Trên màn hình rộng, việc lia mắt đọc từ đầu này sang đầu kia rất mệt
- Việc comment này được upvote nhiều nhất cho thấy không nên tiếp nhận lời khuyên trên HN một cách quá nghiêm túc
- Giới hạn chiều rộng nội dung thì không sao. Nhưng tôi không thích việc lạm dụng content-width, font lớn và line-height lớn. Nhiều trang dạo này dùng font quá to, giãn dòng quá rộng nên phải cuộn quá nhiều. Kích thước font mặc định của trình duyệt vốn đã khá phù hợp với hệ thống rồi, nên cứ để nguyên cỡ chữ và giao phần phóng to thu nhỏ cho zoom là được
Không cần đọc bài cũng biết đáp án rất rõ ràng. Đáp án là ‘0’
- Style mặc định đặc biệt bất tiện trên di động, nhất là với ảnh. Như bài viết nói, nếu muốn thứ gì đó “trông khá ổn” thì tôi không nghĩ chỉ dùng mặc định là dễ
- Mặc định của trình duyệt là serif
Với reset CSS, vẫn cần một chút căn chỉnh nền tảng. Nếu chỉ nhắm tới các trình duyệt trong vòng 5 năm trở lại đây, thì dùng một reset phổ biến đã được tinh gọn là đủ
- Điểm cốt lõi không phải là đồng nhất style mà là một đường cơ sở dễ đọc. Dù hiển thị khác nhau giữa các nền tảng/trình duyệt, chỉ cần dễ đọc là được. Thực tế hơn khi tập trung vào tính khả dụng cơ bản thay vì sự hoàn hảo về thẩm mỹ
- reset đang bị đánh giá quá cao. Với các trường hợp tối giản như blog cá nhân, style hơi khác nhau giữa các nền tảng cũng không phải vấn đề lớn. Đó là tâm lý xuất phát từ bản năng của designer muốn ám ảnh việc mọi thứ phải khớp nhau

img { max-width: 100%; }
Thiết lập này nhất định phải đi cùng height: auto. Nếu không thì tỷ lệ ảnh sẽ bị méo
img, svg, video { max-width: 100%; }
Trên Chrome 141, do vấn đề width/height của phần tử SVG lồng nhau nên việc tính auto bị sai. Tạm thời phải xử lý bằng
svg:where(:not(svg svg))
Font system-ui không đơn thuần là một phương án thay thế cho sans-serif. Nếu dùng font UI hệ thống cho phần thân nội dung, ở một số tổ hợp OS/ngôn ngữ nó có thể khó đọc đến mức gần như không đọc nổi. Nếu cần sans-serif thì cứ dùng sans-serif
Cỡ chữ mặc định hơi nhỏ, khoảng 18~20px (1.25rem) là hợp lý. Nhưng trên màn hình nhỏ thì tốt nhất không vượt quá 1rem
Line-height mặc định thường được khuyên là 1.5~1.7, nhưng 1.7 thì quá rộng trên màn hình nhỏ. Mức 1.4~1.5 là phù hợp hơn, và có thể điều chỉnh trong khoảng 1.4~1.6 tùy kích thước màn hình
font-family: System UI;
Đây rõ ràng là lỗi cú pháp. Chỉ cần rà lại stylesheet là thấy ngay
Tách biệt theme sáng/tối của hệ thống với theme của web là một ý tưởng hay. Firefox mặc định cho phép nội dung đi theo theme hệ thống và cũng có thể chỉnh riêng
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Điều này có nghĩa là tối thiểu có khoảng đệm 2rem (nếu cộng cả body margin mặc định thì thành 2rem+8px). Khoảng đệm đó là quá nhiều, và vị trí áp dụng cũng hơi kỳ. Nếu áp dụng cho main thì dùng padding sẽ hợp lý hơn, như sau

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

Nhưng trên thực tế, header hay footer cũng cần cùng mức đệm hai bên, nên tốt hơn là chỉnh margin của body

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Như vậy có thể giảm khoảng đệm từ khoảng ~40px xuống mức 16px

Thực tế mà nói, phần lớn việc chỉnh layout và tinh chỉnh chi tiết đều có thể giải quyết bằng media query. Trong trường hợp này, lượng code cuối cùng cũng không tăng bao nhiêu so với CSS thông thường được viết cẩn thận

Tạo một website ổn với lượng CSS tối thiểu (2023)