HTML CSS源码怎么写才能少踩坑？

刚学前端那会儿，我照着教程敲的登录页面，在Chrome上美如画，到IE上直接错位到亲妈都不认识！后来才发现是忘了加-ms前缀。今天就跟你掏心窝子聊聊——​​怎么写HTML CSS源码才能少走三年弯路​​！

选择器优先级血泪史

去年帮学妹调试页面，她死活搞不懂为什么.nav{}干不过#nav li{}。​​这四个级别要刻进DNA​​：

1. ​​!important​​（核武器，慎用）
2. ​​行内样式​​（style="color:red"）
3. ​​ID选择器​​（#header）
4. ​​类选择器​​（.btn）

某电商大厂出过事故：实习生用!important覆盖了全局样式，导致促销页面价格全红！现在团队规定用BEM命名法，类名长得像这样：.header__nav--active

盒模型调试秘籍

用开发者工具检查时，常发现元素实际宽度=设定值+padding+border。​​这招保命技巧传男也传女​​：

css**
* {  box-sizing: border-box; /* 让宽度包含padding和border */}

某社区网站因为没加这个，导致1200容器实际撑到1280px，手机端直接横向滚动条乱飞！

Flex布局翻车现场

别看Flex简单，这三个坑我年年见新人踩：

• ​​flex-shrink默认会收缩​​（固定尺寸要设flex:0 0 200px）
• ​​align-items管交叉轴​​（老有人和justify-content搞混）
• ​​gap兼容性要处理​​（IE不支持得用margin hack）

某创业公司官网在Safari上布局全乱，就因为用了gap却没加-webkit前缀！

响应式设计生死线

媒体查询写多了容易变面条代码，试试这招：

css**
/* 移动优先 */.container { padding:10px; }@media (min-width:768px) { /* 平板 */  .container { padding:20px; }}@media (min-width:1200px) { /* PC */  .container { padding:30px; }}

某新闻站改版后CTA按钮在折叠屏上点不到，就是因为断点设了max1024px！

性能优化隐藏考点

你以为写对样式就完事了？这些细节能让加载快3倍：

1. ​​避免@import​​（会阻塞渲染）
2. ​​压缩CSS​​（用PurgeCSS删除无用代码）
3. ​​慎用通配符​​*（特别是body * { }）

某后台系统全局用了* {transition:all .3s}，结果操作卡成PPT！改成具体属性后FPS从30飙到60！

最后说个大实话：别死记那些CSS黑魔法，把基础选择器、盒模型、Flex/Grid三大件玩溜了，就能干掉80%的布局问题。我现在带新人必让手写瀑布流布局，不准用任何框架——练完这个，看源码就像看小说！