#css

Why I don't recommend Tailwind CSS

Tailwind CSS là framework CSS phổ biến giúp chuẩn hóa khoảng cách, màu sắc, kiểu chữ mà không yêu cầu kiến thức thiết kế đồ họa. Tuy nhiên, tác giả không khuyến nghị sử dụng nó do những hạn chế trong khả năng tùy biến, hiệu suất và cách tiếp cận "utility-first" có thể gây khó khăn cho việc bảo trì.

Lập trình viên nên đọc bài này để hiểu cách Tailwind CSS có thể khiến dự án trở nên rắc rối hơn khi không có kiến thức về thiết kế UI, dẫn đến thời gian phát triển lâu hơn và chất lượng thiết kế kém hơn so với cách sử dụng CSS truyền thống hoặc các framework khác.

Can we make default tailwind a more accessible choice?

Tailwind sử dụng đơn vị rem cho các breakpoint nhằm mục đích cải thiện khả năng truy cập, nhưng điều này không luôn tối ưu cho bố cục layout. Sự khác biệt giữa hai mục tiêu này cần được xem xét kỹ hơn.

Lập trình viên nên đọc bài này để hiểu cách Tailwind không chỉ tối ưu hóa thiết kế mà còn có những cơ chế rem-based cho breakpoints giúp cải thiện tính tương thích với thiết bị có độ phân giải thấp và người dùng có thị lực hạn chế, từ đó tối ưu cả hiệu suất và khả năng truy cập.

Max Value Of A CSS Length Layout Unit · August 5, 2026

Giá trị tối đa cho đơn vị độ dài CSS trong layout là 33.554.432px.

3D CSS, from Super Mario Bros 3 to Mario 64

Bài viết hướng dẫn tạo hiệu ứng 3D trong CSS từ cơ bản đến nâng cao, bao gồm các kỹ thuật như thiết lập perspective, điều chỉnh góc nhìn (perspective-origin), duy trì chiều sâu (transform-style: preserve-3d), di chuyển và xoay đối tượng bằng translateZ/rotateX/Y/Z, cùng cách tạo hoạt ảnh mượt mà và đảm bảo tính truy cập. Kết quả là một cảnh 3D đơn giản có thể xoay quanh, hoàn toàn không sử dụng WebGL.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng 3D đơn giản bằng CSS—không cần WebGL—để áp dụng vào thiết kế UI, game nhỏ hoặc hiệu ứng tương tác trên web một cách hiệu quả và dễ triển khai.

Responsive block styles and configurable viewports in WordPress 7.1

WordPress 7.1 bổ sung các trạng thái responsive (Tablet, Mobile) cho styles của khối (block), cho phép cấu hình giao diện theo từng viewport thông qua Global Styles hoặc thiết lập riêng cho từng khối. Tính năng này hỗ trợ hầu hết các block sử dụng core block supports như typography, color, background, border.

Là lập trình viên WordPress, bạn nên đọc bài này để hiểu cách tối ưu hóa thiết kế responsive cho các block với các state style mới trong WordPress 7.1, giúp bạn áp dụng hiệu quả các tùy chọn viewport (điện thoại, máy tính bảng) cho toàn bộ hệ thống mà không cần phụ thuộc vào CSS thủ công.

we finally learned to center a div, then browsers added sidebars

Các nhà phát triển đã mất nhiều năm để tìm cách căn giữa phần tử div trong cửa sổ trình duyệt, nhưng sau đó trình duyệt lại bổ sung thêm thanh sidebar, khiến việc căn giữa trở nên phức tạp hơn.

Lập trình viên nên đọc bài này để hiểu cách các trình duyệt tự động thêm sidebar (thông tin trang) và các tính năng mới của WebView, giúp bạn tránh những lỗi không mong muốn khi thiết kế UI và tối ưu hóa giao diện cho các ứng dụng web.

HTML, CSS & JavaScript: The Three Skills Every Developer Must Master Before Chasing Frameworks

Trước khi theo đuổi các framework, nhà phát triển nên thành thạo ba ngôn ngữ cốt lõi: HTML, CSS và JavaScript.

Là lập trình viên, bạn nên đọc bài này để hiểu rõ rằng những kỹ năng cơ bản của HTML, CSS và JavaScript là nền tảng không thể thiếu trước khi bạn nhảy vào học các framework phức tạp, giúp tránh rơi vào tình trạng học theo xu hướng mà không có sự hiểu biết sâu sắc về cơ sở.

Get Ready For the Powerful CSS border-shape Property!

Thuộc tính CSS sắp ra mắt border-shape cho phép định hình toàn bộ phần tử đồng thời giữ nguyên border, box-shadow và outline, khắc phục hạn chế của clip-path. Tính năng này hỗ trợ đa dạng hiệu ứng như border dạng shape, background cắt gọt, hoạt ảnh, hiện chỉ khả dụng trên Chrome.

Lập trình viên nên đọc bài này để khám phá cách border-shape trong CSS sẽ giải quyết vấn đề tạo các hiệu ứng trang trí (border, shadow) theo hình dạng tự do mà không cần cắt bỏ bằng clip-path, mở rộng khả năng tạo UI sáng tạo và hiệu ứng động hình với các ví dụ thực tế.

Prop For That

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.

Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.

Rebuilding FIFA Standings Layout with CSS Subgrid

Bài viết hướng dẫn cách xây dựng lại bố cục bảng xếp hạng FIFA bằng CSS Grid, Subgrid và các kỹ thuật liên quan.

Lập trình viên muốn khám phá cách sử dụng CSS Grid và Subgrid để tái thiết kế bố cục bảng xếp hạng FIFA một cách hiệu quả, tối ưu hóa tính linh hoạt và khả năng mở rộng cho các dự án tương tự.

GitHub - spiritov/ds.css: A css framework recreating the DS / DS Lite's UI

ds.css là framework CSS mã nguồn mở mô phỏng giao diện người dùng của Nintendo DS Lite, có thể sử dụng bằng cách sao chép thư mục /css hoặc cài đặt qua npm. Dự án cung cấp bản xem trước trực tiếp và đang phát triển thêm các thành phần như đồng hồ, lịch, cùng nhiều UI lấy cảm hứng từ DS.

Lập trình viên nên đọc bài này để khám phá cách tái tạo UI cổ điển của Nintendo DS Lite bằng CSS, giúp tìm hiểu về thiết kế giao diện đơn giản, thân thiện và hiệu suất cao, có thể ứng dụng vào các dự án web hiện đại với phong cách retro.

What’s new in Web UI (Google I/O 2026)

Bài chia sẻ tại Google I/O 2026 giới thiệu các tính năng mới cho Web UI như scroll-triggered animations, scoped view transitions, UI components và primitives CSS/HTML. Demo có sẵn trên CodePen, kèm bài viết chi tiết trên Chrome for Developers.

Lập trình viên nên đọc để cập nhật những công cụ UI hiện đại mới nhất từ Google, giúp tối ưu hóa giao diện web với các tính năng mới như chuyển tiếp hiển thị và hoạt động nhảy trượt, giúp cải thiện trải nghiệm người dùng và hiệu suất phát triển.

Grid Lanes – The Future of Masonry Layout

Grid Lanes, giải pháp phân bố masonry layout đang gây tranh luận, đã chính thức ra mắt và cần tìm hiểu cách triển khai. Bài viết sẽ đi sâu vào cơ chế hoạt động của công nghệ này.

Lập trình viên nên đọc bài này để khám phá cách Grid Lanes giải quyết vấn đề bố trí masonry (độ dài không đều) trong CSS, giúp tạo ra giao diện đẹp, cân bằng và dễ quản lý hơn mà không cần phụ thuộc vào các kỹ thuật phức tạp như flexbox hoặc grid riêng lẻ.

Getting Started with Anchor Positioning • Josh W. Comeau

Giới thiệu thực hành về CSS Anchor Positioning API, hướng dẫn gắn các phần tử nổi như tooltip vào phần tử neo bằng các thuộc tính anchor-name, position-anchor và position-area. Giải thích cách xử lý tràn bằng position-try-fallbacks để tự động lật, đồng thời giới thiệu container queries cấp độ 2 cho tooltip. Đề cập đến chiến lược hỗ trợ trình duyệt bao gồm polyfill Oddbird và @supports feature queries.

Lập trình viên nên đọc bài này để khám phá cách sử dụng CSS mới nhất để tạo ra các tính năng tương tác như tooltip động, container query ankhored và xử lý overflow tự động, giúp nâng cấp UI của ứng dụng mà không cần JavaScript.

ProMe, a TTRPG Companion App

ProMe là ứng dụng hỗ trợ (companion app) cho trò chơi nhập vai solo The Protector's Memories, được xây dựng bằng Next.js dưới dạng PWA với tính năng offline nhờ Serwist và lưu trữ cục bộ (local-first) đồng bộ lên Netlify DB (Neon). Ứng dụng tích hợp nhiều công nghệ như bản đồ lục giác CSS, hệ thống nhật ký Markdown nâng cao, âm thanh cross-fading bằng Howler.js, cùng cơ chế đồng bộ hai chiều giữa local và cloud kèm xử lý xung đột.

Lập trình viên cần đọc bài này để khám phá cách xây dựng một ứng dụng PWA toàn diện với Next.js, từ thiết kế giao diện độc đáo đến giải quyết vấn đề đồng bộ hóa dữ liệu và xung đột trong hệ thống local-first, giúp hiểu rõ cách tối ưu hóa hiệu suất và trải nghiệm người dùng trong ứng dụng game.

writing-mode

Thuộc tính CSS writing-mode xác định cách sắp xếp các dòng văn bản theo chiều ngang hay chiều dọc, cũng như hướng tiến triển của khối và dòng.

Lập trình viên nên đọc về writing-mode để tối ưu hóa giao diện web cho các ngôn ngữ viết ngang-từ phải (như tiếng Việt) hoặc dọc, tránh các lỗi hiển thị không chính xác và cải thiện trải nghiệm người dùng trên các thiết bị đa dạng.

How to create awesome staggered animations in CSS

CSS hiện đại hỗ trợ tạo hiệu ứng staggered animation (hoạt ảnh so le) trực tiếp bằng các hàm sibling-index() và sibling-count() mà không cần tiền xử lý hay JavaScript. Bài viết hướng dẫn cách xây dựng hiệu ứng leo thang (ascending) và giảm dần (descending) bằng cách tính toán animation-delay dựa trên sibling-index(), phân biệt giữa timing chồng chéo (overlapping) và tuần tự (sequential), cùng các ví dụ thực tế như hero section hay hiệu ứng hiển thị văn bản kiểu chat. Ngoài ra, nó cũng đề cập đến trường hợp cần JavaScript (thay đổi trạng thái tương tác, hiệu ứng thoát), cách viết fallback @supports cho trình duyệt không hỗ trợ sibling-index(), và tuân thủ cài đặt ưu tiên chuyển động giảm (prefers-reduced-motion) của người dùng. Hiện tại, tính năng này được hỗ trợ bởi khoảng 75% trình duyệt (Chromium và Safari).

How to Create Accessible Modals and Pop-ups Using HTML, CSS, and Minimal JavaScript

Tạo modal và pop-up có thể phức tạp do yêu cầu nhiều boilerplate code. Bài viết hướng dẫn cách xây dựng chúng bằng HTML, CSS và JavaScript tối thiểu, tập trung vào khả năng truy cập (accessibility).

Lập trình viên nên đọc bài này để học cách thiết kế các modal và pop-up thân thiện với người dùng và người bị khuyết tật, giúp cải thiện trải nghiệm người dùng và tuân thủ các tiêu chuẩn Accessibility (ADA, WCAG) mà không cần phải viết nhiều mã phức tạp.

100 Ways To Center A Div · July 21, 2026

Bài viết giới thiệu 100 phương pháp khác nhau để căn giữa một phần tử div bằng CSS, do Temani Afif biên soạn.

Bài viết này sẽ giúp bạn khám phá những kỹ thuật đa dạng và hiệu quả để centering một <div> một cách chính xác, từ các phương pháp cơ bản đến các giải pháp tiên tiến, giúp tối ưu hóa layout và tránh những lỗi thường gặp trong thiết kế web.

An animated radial gradient mask over text in CSS

Bài viết hướng dẫn tạo hiệu ứng mặt nạ (mask) gradient xuyên tâm hoạt ảnh trên văn bản bằng CSS, sử dụng thuộc tính mask kết hợp repeating-radial-gradient, điều chỉnh tâm gradient quanh một chữ cái cụ thể, và tận dụng @property (CSS Houdini) để làm thuộc tính tùy chỉnh có thể hoạt ảnh. Ngoài ra, bài viết cũng đề cập đến sự tương thích trình duyệt không đồng nhất trên Firefox và Safari, cùng các mẹo điều chỉnh độ dày và khoảng cách sọc thông qua thuộc tính CSS tùy chỉnh.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng ánh sáng động từ gradient bán kính trên văn bản bằng CSS, giúp nâng cao tính tương tác và thẩm mỹ cho giao diện web mà không cần JavaScript.

Choose your own dark mode

Tác giả bổ sung tính năng chọn màu tùy thích cho chế độ tối (dark mode) thông qua bảng chọn màu.

Lập trình viên nên đọc bài này để tìm hiểu cách triển khai dark mode tùy chỉnh bằng công cụ color picker để tối ưu hóa giao diện người dùng, giảm tiêu thụ năng lượng thiết bị và mang lại trải nghiệm thân thiện hơn với nhiều người dùng khác nhau.

Why default Tailwind is not always an accessible choice

Tailwind CSS mặc định dùng breakpoint dựa trên rem, khiến layout thay đổi bất ngờ khi người dùng điều chỉnh cỡ chữ mặc định của trình duyệt, trong khi breakpoint px vẫn ổn định. Mặc dù rem tốt hơn cho người đọc có nhu cầu phóng to chữ, nhưng nó kém dự đoán hơn và không nhất thiết tuân WCAG 1.4.4 như zoom trang. Nhà phát triển nên chủ động chọn giữa rem hay px dựa trên đối tượng người dùng mục tiêu.

Lập trình viên nên đọc bài này để hiểu cách Tailwind CSS ảnh hưởng đến tính khả dụng (accessibility) khi sử dụng breakpoints rem mặc định, giúp họ lựa chọn giữa rem và px một cách thông minh để phù hợp với nhu cầu người dùng thay đổi font mặc định hoặc zoom trang web.

Thinking Horizontally in CSS @layer – Master.dev Blog

CSS @layer thường được xem như cơ chế xếp chồng theo chiều dọc để kiểm soát độ ưu tiên, nhưng có thể hình dung theo chiều ngang: đặt các custom properties (design tokens) của mỗi component vào @layer giúp chúng dễ bị ghi đè mà không cần đấu độ ưu tiên. Mẫu thiết kế này sử dụng hai lớp cho mỗi component: lớp token (yếu, dễ ghi đè) và lớp style có phạm vi (được bảo vệ). Cách tiếp cận này giúp kiến trúc CSS trở nên phẳng hơn, tránh xung đột độ ưu tiên khi mở rộng nhiều component.

Lập trình viên nên đọc bài này để khám phá cách sử dụng @layer không chỉ như một công cụ kiểm soát độ ưu tiên vertical mà là một mô hình thinking horizontal, giúp giảm thiểu xung đột tính chất và tối ưu hóa việc quản lý các design tokens trong dự án.

Last week in the studio (CW29-26)

Còn hai tuần nữa là tới kỳ nghỉ tháng Tám, nên tôi đang cố gắng hoàn thành công việc trên Lockrose và Portico Investments.

Những thông tin về Lockrose và Portico Investments có thể là những dự án thực tế hoặc công nghệ mới liên quan đến lĩnh vực tài chính, blockchain, hoặc AI, giúp bạn cập nhật xu hướng công nghệ trong ngành và tìm hiểu cách ứng dụng trong thực tế.

5 CSS Properties You Should Know for Better Text Designs – Master.dev Blog

CSS cung cấp năm thuộc tính quan trọng giúp cải thiện thiết kế văn bản: background-clip để che phủ nền, vertical-align để căn chỉnh phần tử, box-decoration-break để duy trì kiểu dáng cạnh nhất quán, letter-spacing để điều chỉnh khoảng cách chữ, và text-combine-upright cho bố cục văn bản theo chiều dọc.

Nếu bạn muốn nâng cao chất lượng thiết kế văn bản trên trang web bằng CSS với những tính năng hiện đại như cắt nền, align chính xác hoặc chữ dọc, bài này sẽ cung cấp những công cụ thiết yếu mà nhiều lập trình viên bỏ qua.

Breakout Background using Modern CSS

Sử dụng border-shape hoặc border-image trong CSS hiện đại để kéo dài màu nền đến tận mép màn hình.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng nền phù hợp với thiết kế hiện đại bằng CSS border-shape và border-image, giúp tối ưu hóa hiệu suất và trải nghiệm người dùng mà không cần phụ thuộc vào JavaScript.

Roux’s New Component Library

Thoughtbot đã bổ sung thư viện component HTML vào Roux, framework CSS của họ, nhằm cung cấp nền tảng vững chắc cho các dự án mà không phụ thuộc vào Tailwind hay React. Thư viện này được xây dựng bằng HTML/CSS thuần, ưu tiên khả năng truy cập và đánh dấu ngữ nghĩa, đồng thời hỗ trợ sao chép-dán mã trực tiếp từ trang tài liệu.

Lập trình viên nên đọc để khám phá cách Roux kết hợp CSS và HTML thành một thư viện thành phần UI đơn giản, dễ sử dụng, đồng thời đáp ứng tốt tính khả dụng và phong cách thiết kế theo tiêu chuẩn Thoughtbot, giúp tiết kiệm thời gian và nâng cao chất lượng dự án.

The Shifting Line Between CSS States and JavaScript Events

CSS pseudo-classes ngày càng tương đồng với JavaScript event listeners, giúp xử lý trạng thái UI mà không cần viết JS. Bài viết so sánh các pseudo-classes phổ biến (:hover, :focus, :valid...) với sự kiện JavaScript tương ứng, đồng thời giới thiệu spec event-trigger mới (chưa được hỗ trợ) cho phép CSS lắng nghe sự kiện trực tiếp để kích hoạt animation.

Những kiến thức về sự tương đồng giữa các trạng thái CSS và sự kiện JavaScript giúp lập trình viên tối ưu hóa mã, giảm bớt sự phụ thuộc vào JavaScript và khám phá các tính năng tương lai của CSS để làm UI đẹp hơn, nhanh hơn và hiệu suất cao hơn.

How to Build a Dark Mode Toggle Without JavaScript

Bài viết hướng dẫn cách tạo nút chuyển chế độ tối (dark mode) chỉ bằng HTML và CSS, không cần JavaScript, bằng cách sử dụng CSS :has() và radio button ẩn. CSS variables quản lý màu sắc cho hai chế độ, còn prefers-color-scheme đảm bảo giao diện khớp với sở thích hệ thống của người dùng. Giải pháp này cũng cải thiện khả năng truy cập, SEO và khả năng thu thập dữ liệu của các trình thu thập thông tin AI.

Lập trình viên nên đọc bài này để khám phá cách đơn giản, hiệu quả và tối ưu hóa tính năng chuyển đổi chế độ tối mà không cần JavaScript, giúp cải thiện trải nghiệm người dùng và mở rộng kiến thức về CSS hiện đại.

2026 State of CSS, Devs Surveys

Bài viết điểm qua những ghi nhận và kết quả nổi bật từ khảo sát State of CSS 2026, trong đó có sự xuất hiện của CSS-Tricks.

Những xu hướng mới nhất trong CSS—như tính năng tương lai của trình duyệt và xu hướng thiết kế hiện đại—được cập nhật chi tiết qua khảo sát, giúp lập trình viên tối ưu hóa hiệu suất và tương thích cho dự án của mình ngay từ bây giờ.

Responsive CSS Grid Layout with Animation

Kỹ thuật tạo layout CSS Grid responsive với hiệu ứng animation mượt khi thay đổi bố cục. Phương pháp này tính toán vị trí từng item bằng CSS translate thay vì grid tự động, sau đó sử dụng CSS transition để tạo animation khi layout cập nhật (thay đổi kích thước hoặc thêm/xóa item). Hiện chỉ hỗ trợ trình duyệt Chromium-based.

Lập trình viên nên đọc bài này để khám phá cách tạo ra giao diện động và phản ứng linh hoạt với CSS Grid mà không cần phụ thuộc vào các tính năng hỗ trợ rộng rãi, giúp tối ưu hóa hiệu suất và tương thích cho nhiều trình duyệt.

Fixing full-bleed CSS

Bài viết hướng dẫn kỹ thuật CSS full-bleed layout, phân tích các vấn đề liên quan đến thanh cuộn (scrollbar) khi dùng đơn vị viewport, đề xuất giải pháp hiện đại sử dụng CSS containment và container query inline units (cqi), đồng thời giải quyết vấn đề container lồng nhau bằng @property. Tương lai, tiêu chuẩn W3C có thể cải tiến bằng cách tham chiếu container theo tên trong đơn vị container.

Lập trình viên nên đọc bài này để khám phá cách sửa lỗi về full-bleed CSS, đặc biệt là vấn đề scrollbar và container unit trong các layout phức tạp, giúp tối ưu hóa hiệu suất và độ chính xác thiết kế trên các nền tảng khác nhau.

Wiggly/Wavy Input Range Slider

Kỹ thuật CSS thuần tạo thanh trượt (range slider) dạng lượn sóng bằng phần tử HTML input gốc, sử dụng các tính năng hiện đại như border-shape, Scroll-Driven Animations và @property mà không cần JavaScript hay HTML bổ sung. Chỉ hoạt động trên Chrome, cho phép tùy biến dễ dàng qua CSS variables và có công cụ hỗ trợ tạo đường lượn sóng.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng slider dải nhập gợn sóng chỉ bằng CSS hiện đại, tiết kiệm thời gian và không cần JavaScript, giúp tối ưu hóa hiệu suất và mở rộng khả năng thiết kế UI cho ứng dụng Chrome.

conic-gradient and the modern CSS gradient toolbox

CSS giới thiệu conic-gradient mở rộng khả năng vẽ biểu đồ hình tròn, bánh xe màu sắc, mẫu lặp và hỗ trợ nội suy màu oklch cho các gradient hiện đại.

Lập trình viên nên đọc bài này để khám phá cách sử dụng conic-gradient trong CSS để tạo hiệu ứng màu sắc tự động, phù hợp với thiết kế hiện đại như vòng tròn màu sắc, mô phỏng màu wheel hoặc các mẫu lặp lại tinh tế, giúp tối ưu hóa hiệu suất và tạo ra UI đẹp hơn với ít mã hơn.

Modern Web Guidance – Master.dev Blog

Google ra mắt công cụ Modern Web Guidance tại Google I/O, gồm các tệp Markdown lồng nhau giúp AI tạo mã HTML, CSS và JavaScript chính xác hơn bằng cách cập nhật xu hướng mới nhất. Tài liệu hướng dẫn chi tiết về các tính năng như CSS animations, yêu cầu bắt buộc như overlay hay allow-discrete, đồng thời nhắc nhở nhà phát triển không nên tin hoàn toàn vào AI mà cần hiểu rõ mã mình viết.

Là người viết mã, hiểu rõ các tiêu chuẩn mới nhất như Modern Web Guidance giúp bạn tránh lỗi kỹ thuật, tối ưu hóa hiệu suất và đảm bảo code phù hợp với các tiêu chuẩn hiện đại mà AI không thể thay thế được.

Life is too short for lowercase ASCII

Bài viết bàn về sự thay đổi trong phương pháp CSS từ các quy ước nghiêm ngặt như BEM, SMACSS, ITCSS sang cách tiếp cận linh hoạt hơn nhờ các tính năng hiện đại như cascade layers, @scope, @container và :where. Tác giả chia sẻ sở thích cá nhân khi viết hoa tên class component (ví dụ: class="Post") để tăng tính rõ ràng, đồng thời nhắc nhở về hạn chế của việc phụ thuộc quá nhiều vào class selectors theo đặc tả CSS Level 1.

Bạn nên đọc bài này để hiểu cách CSS đã thay đổi từ quy tắc cứng nhắc truyền thống sang sự linh hoạt mới mẻ nhờ công nghệ hiện đại, giúp bạn tối ưu hóa cách viết mã CSS hiệu quả hơn mà không cần lo lắng về các quy ước cũ.

Alignment in CSS Grid Lanes

CSS Grid Lanes giới thiệu hệ thống layout mới với hai trục căn chỉnh: trục grid (xếp lane) và trục xếp chồng (các item nằm trong lane). Căn chỉnh theo trục grid tương tự CSS Grid tiêu chuẩn (dùng justify-*/align-* cho chiều ngang/dọc), còn căn chỉnh trục xếp chồng (như align-items: stretch) cho phép các item lấp đầy khoảng trống. Tính năng này đang được triển khai trên Chromium và Safari, với hỗ trợ gần hoàn thiện trên Chromium.

Lập trình viên nên đọc bài này để hiểu cách tối ưu hóa bố cục grid với các tính năng mới như align-items trên trục xếp chồng và cách điều khiển align-content cho không gian dư thừa, giúp thiết kế UI đẹp hơn và hiệu suất cao hơn trong các trình duyệt hiện đại.

FixCSS – Master.dev Blog

Bài viết giới thiệu về tài liệu nổi tiếng của Nhóm Làm việc CSS liệt kê những sai lầm trong thiết kế CSS, như việc box-sizing: border-box đáng lẽ nên là mặc định. Declan Chidlow đã thực hiện một bước tiến chưa từng thấy trong cách tiếp cận vấn đề này.

Là lập trình viên phát triển web, đọc bài này giúp bạn hiểu rõ về những sai lầm lịch sử trong CSS—chẳng hạn như box-sizing: border-box—để tránh phải sửa lỗi thừa khi thiết kế giao diện, tiết kiệm thời gian và tránh những thói quen cũ gây khó khăn cho tương lai.

You might need to know about the CSS lh unit

Đơn vị lh trong CSS dùng để thiết lập kích thước dựa trên chiều cao dòng (line height) của phần tử, giúp điều chỉnh khoảng cách giữa các dòng văn bản một cách linh hoạt.

Lập trình viên nên đọc bài này để hiểu cách sử dụng đơn vị lh trong CSS để điều khiển khoảng cách giữa các dòng văn bản một cách chính xác và hiệu quả, giúp tối ưu hóa thiết kế UI và trải nghiệm người dùng.

The CSS aspect-ratio property and the math behind it

Thuộc tính CSS aspect-ratio thay thế kỹ thuật "padding-top hack", giải thích toán học đằng sau contain và cover, cũng như cách các thuộc tính width và height ngăn chặn CLS.

Lập trình viên nên đọc bài này để khám phá cách sử dụng aspect-ratio trong CSS để thay thế các kỹ thuật cũ như padding-top hack, giải quyết các vấn đề về tính toán và bố trí hình ảnh, video hiệu quả mà không phụ thuộc vào chiều rộng hoặc chiều cao cố định, giúp tối ưu hóa trải nghiệm người dùng và tránh CLS (Content Layout Shift).