首页

前端工程师讨厌写 CSS 是什么心态？第1页

Ivony 网友的相关建议:

其实很多时候我们放大了JavaScript的缺陷。却忽略了CSS的问题……

相信每一个前端都听说过一句话，HTML描述文档结构，CSS决定呈现样式，JavaScript处理行为逻辑。

真正的前端都知道，这句话里面只有三分之二是真的。

jin-chi-zhong 网友的相关建议:

我觉得大部分在这个答案下“赞扬”CSS的，都是没写过多少CSS的。

CSS的坑在于：CSS永远只解决一半的问题。

大部分的时候，写CSS就是不断的运用各种“花招”去解决各种正常的需求。

而这些“花招”又带来更多的问题。

不信？我们来看看一个最基础的需求吧：如何在CSS中居中一个元素。

Google一下 css vertical center就会找到一个叫做css-tricks的网站。

分了12类情况讨论如何居中一个元素。

那么，是不是掌握了这12种情况，就完全万事大吉了呢？

真的想多了。。。不信你再Google一下：css center fixed div

然后可以再Google一下：css center fixed div with dynamic content

然后可以再Google一下：css vertical center fixed div with dynamic content

最后你会“很开心的”找到一种万金油的写法：设置left和top为50%，然后用transform: translate(-50%, -50%)修正回来。

你以为故事到此就结束了？？？？？naive

CSS最可怕的地方在于，CSS中很多“事实标准”的东西。或者说，由于实施过程中发现技术限制而导致最后没法实现的和期望一致而达成的妥协标准。

我们就拿刚刚的“万金油”举例吧，为什么这个万金油还是有坑。

上面截图的代码在此：

       <html>   <body>     <div class='popup-mask'>       <div class="popup" style="width: 500px; height: 400px">         <h1>一个弹出窗口</h1>         <div class='popup-mask'>           <div class="popup" style="width: 200px; height: 100px">             <h1>弹出窗口中的弹出窗口</h1>           </div>         </div>       </div>     </div>   </body>   <style> .popup {     position: fixed;     left: 50%;     top: 50%;     transform: translate(-50%, -50%);     background-color: blue; }  .popup-mask {     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;     background-color: rgba(0,0,0,0.3); }   </style> </html>