CSS Grid 与表单实现电影院座位选位系统
之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？
之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？
实际网页很少遇到特殊的视觉会需要动用到 CSS Grid 的情况，而我近期在制作一些比较特殊视觉的网页布局，事后感觉特别适合作为一个 CSS Grid 的启发教材，于是写下了本篇文章帮助透过真实世界案例更深刻了解 CSS Grid。
为了确保页面内容保持在合理的范围内，很多时候会需要在外层使用固定的尺寸作为网页内容的容器。而近期在翻新的页面有一些独特的布局样式，透过 CSS Grid 来更灵活的让容器内容也能跳脱安排在各处，主要参考 Kevin Powell 的做法。
浏览器引擎前缀是为了让开发者在浏览器尚未正式支援的情况下先使用这些前缀来实现一些新的 CSS 特性，甚至当时还时常会使用 PostCSS 这类预处理器的 autoprefixer 插件来预处理 CSS 添加上这些前缀。近期发现需要前缀的属性越来越少，未来也大机率不会再有新的前缀被加入了。
一开始听到CSS Container Queries 这个名词还是在一两年前，随着时间演进建构网页的模式也变动了许多次，我也越来越确信这项技术会是未来建构 RWD 网页的一块重要拼图，文章将介绍现有的Media Queries 有哪些缺陷，新解方则具备哪些优势？
撰写这篇文章是因为接手过非常反人类的 Tailwind 项目，一些不应该出现的反模式其实都可以在早期被轻松避免，随着项目规模变大，这些反模式就会变成一个巨大的问题难以修正。本文将介绍一些我在项目中看到的反模式，并提醒你千万不要这样做！
开发者们对 CSS 有不同的意见，有的人说它很简单、有的人说它难以驾驭，这些都是事实。我时常听到苦恼的后端或是与其打交道多年的自己脱口而出：「CSS 真的好诡异阿！」，这篇文章来总结为什么CSS 是一个让人又爱又恨的存在，它为什么这么难学这么诡异？
我既设计网页也开发网页，并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是：我需要绘制多少种尺寸的网页？我需要为网页设置多少个断点？这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。
赋予网页元素相对的关系而非绝对的数值，让我们强烈联系元素之间的差异，而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章，作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值，真是优雅简洁的方法！完美的发挥了 CSS 变量的优势，促使我写下这篇文章。
响应式网页内的内容像水一样，顺应着浏览器的尺寸(容器)自动填装，只要内容挤破容器就会产生x 轴，因此解决方法无疑就是「找出网页中超出浏览器宽度的元素」。这是大多数人困惑的地方「知道问题点，但是不知道怎么下手 🥺」。实际上这个问题的解决方法很简单，本篇文章提供提供两种解决方案。
唯有了解盒模型才能开始学习更多网页切版布局的技巧，本文由内至外拆解盒模型，并且解说相关的特性与属性。如果你对于网页有这么多间距可以被调整所困惑，或是初入门 CSS 我都非常推荐要先理解 CSS 的盒模型概念，网页其实就是一堆箱子组成的概念。
意思是说「如果你熟悉编写原生 CSS 的话，那么学 Tailwind 对你来说是易如反掌」。在 2022 CSS 调查中 Tailwind 都是最受欢迎、最多人使用的 CSS 框架，它开创性的设计理念打破了传统语义化架构 CSS 的方式，值得尝试用不同的方式架构网站！
行动装置占了现代网际网路流量的一半以上，并且这样的趋势只会越来越高，随着行动装置的普及，像手表、手机、平板……等装置，连结上网页的装置只会越来越多元零碎，而每个装置又有不同的解析度与尺寸，因此市场对「能够适应各种装置」的网页需求是大大的增加，因此出现了 Responsive Web Design (RWD) 的做法。
CSS 预处理器已经深刻地改变了前端开发的方式，成为一项必备工具。但随着时间推移，新标准不断推出，我们还需要它们吗？在前端开发领域，经常会听到一些预处理器 (Pre-processor)，比如 Sass、Less、Stylus，这些工具是什么？为什么会存在？本文将主要探讨以下几个重点（附带示例）。
BEM 是一种管理 CSS 撰写方式的一种规范。撰写小型的网站时通常不需要特别考虑到未来样式的命名与权级的规划，但随着网站的复杂度增长就必须需要一套可预测与可扩充的方式，BEM CSS 由于概念简洁好懂，成效显著，并且有着相对长远的历史被测试与应用过，很适合作为初学者第一套管理 CSS 的办法。