当前位置: 首页 > Web前端 > vue.js

客观评价TailwindCSS

时间:2023-03-31 16:55:34 vue.js

的增长趋势比vite强作者:pxn>来源:medium有梦想,有干货,微信搜索【大招走向世界】关注这位还在洗碗的洗碗智慧在清晨。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。前端社区常见的宗教战争文章:TailwindCSS从根本上是邪恶的,Class根本就不是这么用的。看完真他妈生气——铁杆CSS/SCSS支持者会有这样的言论,可能是你日常工作过程中,不适合使用这样的框架,也可能你还没有客观了解TailwindCSS的优势,所以你无法领略它的魅力。先说结论:如果你是做SAAS产品的团队,需要在统一的产品风格主题上进行开发,使用React这样可以模块化x组件的前端框架,那么TailwindCSS会是一个值得导入的样式解决方案。命名我发现对我来说,打断流程状态的事情往往是命名组件的事情。在CSS/SCSS的传统使用中,我需要停下来花时间思考一组组件和它们的子组件的类名。命名,检查是否会和已有组件冲突,这个多出来的步骤其实是拖累开发效率。确实可以使用一些Nestedclasses/BEM等命名策略来让这样的步骤保持一致,减少命名冲突,但是在JS部分写组件的时候,必须要命名组件/命名变量,命名east和west,很多很多时候你的CSS只是改了JS定义的名字,改了文本格式来复制粘贴。比如这里有一个组件AwesomeCardAwesomeCard->.awesomecardAwesomeCardIcon->.awesomecard__iconAwesomeCardBody->.awesomecard__bodyAwesomeCardButton->.awesomecard__button说白了就是浪费生命。行动。还有下面这种情况,经常被“爹”打断思路Label

有时候你需要一些额外的带有flex的div来布局,比如上面的代码中,我想垂直将Icon和Label都居中,这组组件应该使用Caret垂直居中并分别与左右边框对齐。转换成CSS,可能需要用到几个classLabel
另外命名btn__containerbtn__leftgroup会让我很恼火。如果能省去这些步骤,我个人认为开发效率可以大大提高。在文件之间切换影响工作流程的另一件事是单独的HTML/JS/CSS文件。虽然关注点分离在软件工作中是一个非常重要的概念,但是在前端实践中,三个文件的耦合度极高,通常改变一个意味着你必须改变另外两个。频繁切换文件其实效率很低。对于React框架,Html已集成到JSX中。当你习惯了这种工作模式后,你会想要进一步包含样式定义,这也是为什么有各种css-in-js解决方案的原因,TailwindCSS在某种程度上也是css-in-js的一种,各种组件状态逻辑,比如点击后改变文字/背景颜色,直接通过JSX切换className就可以实现(有了classname这样的npm模块就更强大了)风格统一如果是SAAS产品,希望整个团队都有一致的调色板,字体大小、间距、常见的宽高等保持有限的选择,让你布局组件时更能对齐,TailwindCSS已经帮你提取了最常见的text/bg颜色、font-size,和间距。框架的初始设置已经足够了。通常情况下,只需要为产品品牌颜色定义调色板即可,通过配置文件修改扩展其他参数也很方便。你可能会说,我也可以在SCSS中定义各种变量,的确如此,但是你必须自己设置一套参数规则或者参考某个框架模板(MUI/AntD/Bootstrap)来实现。那么又回到了懒人想省打字的问题,到底是...还是。card{background-color:$gray100}对我来说,区别非常明显。Lengthyclassname...通常反对TailwindCSS的正统硬核CSS用户,最常见的攻击是AtomicutilityclassesLengthyclassname,但是这个组件通过React封装其实一点问题都没有。通常您将这些复杂性隐藏在可重用组件中。其实在开发的时候,代码往往是非常清晰易读的比如下面的导航组件在DOM树中是这样的链接链接Link可以把li抽出来写成一个独立的组件constNavItem=({href,children})=>{children}来吧,你的JSX源代码可以组织成以下易于阅读的格式LinkLinkLink当然,前提是可以配合React等框架使用,可以方便的封装组合组件,发挥最大效用。如果不用类似的框架,我不能否认atomiccss的强大毫无疑问,类真的很长很难读,而且文件更小。Stylesheet,因为Utility类有很大一部分是共享的,没有多余的命名。TailwindCSS还自带TreeShaking,不会生成无用类,整体CSS样式表文件可以压缩到很小的体积,浏览器加载速度超快。总结一句老话,工具没有好坏,只有适不适合。以我个人的开发经验来看,导入TailwindCSS在DeveloperExperience上得到了团队的一致好评。近年来,TailwindCSS异军突起。如果它不能解决一些痛点,为什么会出现在这里?这么多人吹捧?如果只是心理上的困扰,我还抱着写传统CSS方法的骄傲和矜持,对新工具及其适用场景没有客观的认识。我觉得很遗憾。毕竟,如果用得好,它真的可以帮助你。带来更好的生产力和效率,团队合作也可以因为共同的标准而和谐运作,何乐而不为呢?编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文:https://medium.com/@nightspri...交流文章每周更新。可以微信搜索“大千世界”阅读即时更新(比博文早一两篇)。这篇文章在GitHub上https://github.com/qq449245884/xiaozhi已经收录,整理了很多我的文档。欢迎明星和完美。面试可以参考考点。也关注公众号,后台就能看到福利了。你说对了。