css问题，80%不是属性问题
我见过最多的返工，不是因为少写了一个属性，而是没想清楚“谁控制谁”。比如卡片里有图片、标题、价格、按钮，新手喜欢给每个元素写固定宽高。看着整齐，数据一变就炸：标题多两个字挤掉价格，图片比例不同把按钮顶下去。
我的做法是先分三层：外层管布局，中层管间距，内层管文本和状态。外层只决定几列、宽度、对齐；中层用gap处理间隔；内层才碰字体、颜色、hover。这么拆，后面产品让你把两列改三列，通常只动一处。
css调样式，真正难在这5处
css我用了很多年，最怕的不是属性记不住，而是页面一改就牵一串。一个按钮在你电脑上好好的，换到375px手机、125%缩放、中文长标题，立刻露馅。这里不讲大全，只讲我反复踩坑后留下的判断方法。
为什么布局会突然崩
布局崩掉，根子常在“默认值”。很多人不知道，flex子项默认min-width:auto，长英文、长链接、SKU编码会把容器撑爆。我之前做后台表格，客户粘了一串32位订单号，右侧操作按钮直接被挤出屏幕。解法很小：给子项补min-width:0，再让文本ellipsis。
还有一个隐蔽坑是百分比高度。你写height:100%，它不是凭空生效，父级得有明确高度。弹窗、全屏页、嵌套滚动区域常卡在这里。我的习惯是能用min-height:100vh就别硬套100%，滚动交给内容区，别让body、弹窗、列表三层一起抢滚动条。
css单位别乱选，差别很大
px、rem、em、vw不是审美选择，是维护成本选择。图标线条、边框、阴影偏移，我基本用px，稳定。正文、按钮字高用rem，方便整站缩放。组件内部小间距可以用em，比如标签左右padding跟着字号走，换大号标签不会显得挤。
vw要小心。很多落地页喜欢font-size:4vw，电脑上看像海报，手机横屏大得吓人。更稳的是clamp(16px, 2vw, 28px)。它给字体设了下限和上限，既能响应式，又不会失控。这个写法我现在几乎每个营销页都会用。
写样式前先定“失败状态”
真正省时间的窍门，是别只看设计稿的理想状态。你要主动测4种失败状态：文字翻倍、图片缺失、按钮禁用、容器变窄。我通常把商品名复制到两行半，把头像地址删掉，把价格改成999999.99，再把浏览器拖到360px。5分钟能发现一堆上线后才会被骂的问题。
样式表也别越写越散。一个页面超过300行，我会把变量、布局、组件状态分开。颜色别到处写#1677ff，抽成--brand-color。间距别凭感觉写11px、17px、23px，定一组4、8、12、16、24。设计不一定看得出来，但后期改版你会感谢自己。
我现在写css的检查清单
动手前问三句：这个区域是内容撑开，还是容器限制？这个元素变长时截断、换行还是挤压？这个状态有没有hover、focus、disabled、loading？少问一句，后面就可能多修一轮。
交付前我会看三个尺寸：375px手机、768px平板、1440px桌面。再开一次浏览器125%缩放。别小看缩放，很多企业用户就是这么用电脑的。页面在缩放下还稳，说明你的布局没靠运气。
常见问题
- css学到什么程度可以做项目？
- 能独立写出弹性布局、响应式断点、按钮表单状态、文本溢出处理，就可以做普通项目。别急着背全部属性，先把flex、grid、position、盒模型、选择器优先级吃透。
- css布局用flex还是grid？
- 一维排列用flex，比如导航、按钮组、左右结构。二维布局用grid，比如商品列表、仪表盘卡片区。判断标准很简单：只管一条线用flex，同时管行和列用grid。
- css样式为什么本地正常上线乱了？
- 常见原因是字体不同、数据变长、浏览器默认样式没重置、构建后加载顺序变化。排查时先看computed样式，再看资源加载顺序，别只盯着源码猜。
- css选择器优先级太乱怎么救？
- 少用!important，先把选择器压短。组件建议用单类名控制，比如.card、.card-title、.card-active。全局样式只放基础规则，别在页面深处写.header .box ul li a这种长链。
- css响应式断点设几个合适？
- 普通内容站三个就够：小于600px、600到1024px、1024px以上。复杂后台可以再加一个1440px。断点不是越多越专业，越多越容易互相打架。