当前位置: 首页 > 科技观察

客观评价TailwindCSS_0

时间:2023-03-17 10:42:59 科技观察

的增长趋势,比Vite更快。前端社区常见的宗教战争文章:TailwindCSS从根本上是邪恶的和歪的,Class根本不是这样用的。看完真是气死了——HardcoreCSS/SCSSSupportBy.会有这样的言论,可能是你不适合在日常的工作流程中使用这样的框架,也可能是你没有客观的了解TailwindCSS的优势,无法领略它的魅力。先说结论:如果你是做SAAS产品的团队,需要在统一的产品风格主题上进行开发,使用React这样可以模块化x组件的前端框架,那么TailwindCSS会是一个值得导入的样式解决方案。命名我发现对我来说,打断流程状态的事情往往是命名组件的事情。在CSS/SCSS的传统使用中,我需要停下来花时间思考一组组件和它们的子组件的类名。命名,检查是否会和已有组件冲突,这个多出来的步骤其实是拖累开发效率。确实可以通过Nestedclasses/BEM等一些命名策略让这样的步骤保持一致,减少命名冲突,但是在JS部分写组件的时候,要命名组件/命名变量,命名east和west,很多时候您的CSS只是复制和粘贴JS定义的名称,更改文本格式。比如这里有一个组件AwesomeCard。AwesomeCard->.awesomecardAwesomeCardIcon->.awesomecard__iconAwesomeCardBody->.awesomecard__bodyAwesomeCardButton->.awesomecard__button是一个浪费生命的重复动作。还有一种情况下面点名,经常被“爸爸”打断我的思路。标签

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