本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出，Tailwind CSS是一种基于类的CSS框架，提供了快速开发网站的便利性，但可能导致HTML代码的臃肿。另一方面，现代CSS方法更加模块化和可维护，但编写速度可能较慢。
上文「前端工程四部曲」模块化的前世今生（上）中我们主要介绍了JS模块化相关的知识，对于JS模块化，相信很多人都不陌生，但说起CSS模块化，可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS，但CSS也是前端三剑客不可或缺的一部分，在编写CSS的时候，绝大多数人都是比较随意的，所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。
在 html 里指定 class，然后在 css 里定义这个 class 的样式。
与传统 html 标签类属性不同，react 中 class 必须编写为 className，比如
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
几天前，我发表了一篇新的博文，详细介绍了我使用styled-components的经验，以及如何将动态样式整合到 js 域中，避免使用 CSS 文件。后来我发现了另一种将样式整合到应用程序中的方法... 那就是 TailwindCSS。
开发者使用 CSS 框架（如 Material UI、Bootstrap 或 Pico）来减少样板代码，提高质量，并确保一致性。然而，随着应用程序代码库的变化，这些收益难以维持。应用程序的外观逐渐偏离框架，新组件被添加进来，已有的布局和组件被修改，开发者必须通过覆盖框架来适应这些变化。然而，覆盖框架比从头开始实现要困难得多。
CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。
为了解决传统CSS在现代前端应用开发中遇到的痛点，FreeWheel评估了大量新一代的CSS框架/工具/方案。在本文中，作者以评估过程为线索，介绍了CSS-in-JS的背景、现状、开发特点和趋势。
我们用这三个维度分析下Vue的SFC（Single-File-Component，单文件组件）：
大家好，我 ssh。在过去的开发中，我一直在用 styled-component 库作为 CSS 的解决方案。它有很多优点，灵活、可复用性强、功能强大、可以接受动态 JS 变量传入组件等等…… 但今天我看到一篇文章，说都是 Spot 团队的人已经决定抛弃 CSS-in-JS 的方案了，因为对他们来说，性能损耗已经远远超过其灵活性的优势了。接下来，我来和大家分享一下这篇Why We're Breaking Up with CSS-in-JS
近年来，前端领域迅猛发展，而在技术的不断发展下，开发者们会根据项目的需求和工具更新的功能来判断自己需要使用的工具，也就导致了很多工具和项目虽然发布时间较晚，却拥有极高人气。本文将为大家整理 2020 年前端领域那些备受瞩目的项目，看看你使用的框架排在第几位吧。
CSS (Cascading Style Sheets) 其实并不是编程语言，CSS可以直接运行在浏览器中，浏览器就是它们的运行环境，CSS 中文名为层叠样式表，也就是一些样式的配置。
postcss使用「工具和插件」转换CSS，可以为css选择器增加不同的「浏览器前缀」等。
本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文文章 Sam 会带大家深入探讨 CSS-in-JS 最初吸引人的原因，以及为什么作者（以及Spot团队的其他成员）决定放弃它。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 学习的路途 总会有很多迷茫 js的迷茫比html和css多了很多倍 每学一节课 都需要付出以前学习html时十倍百倍的努力去理解去练习 学习途中 听了很多 “前端前辈” 的指导教育 产生过很多不确定和担心忧虑 不忘初心 就算再难 也要完成 <!DOCTYPE html> <html lang='en'>
Tailwind CSS 是一个工具集 CSS 框架，网上很多文章已对其有详尽的介绍。本文不是官方文档的复述，也不是系列优点的罗列，作者 Gerard 会从另一个角度出发，在尽力保持客观的前提下，立足于实际开发的场景，指出 Tailwind CSS 存在的一些问题。事实上，除了文中提及的，Tailwind CSS 还存在着不少缺点，比如对高度定制化的支持程度不足、记忆大量预定义类名带来的心智负担等。友情提醒，你不一定会赞同这篇文章的看法，因为我们的看法会受到自身认知和使用体验的影响，但更重要的是可能是作者对新兴技术的态度，用他的原话说，就是：“When everyone is shouting that it’s awesome, it’s usually a good moment to sit down and have a good look at it”
旨在构建基于组件的应用,可针对性提供如下解决方案： 隔离DOM:组件的 DOM 是独立的（例如，document.querySelector() 不会返回组件 shadow DOM 中的节点） 作用域CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入 组合:为组件设计一个声明性、基于标记的 API 简化CSS:作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突 shadow DOM 实现CSS样式作用域的
Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因：
CSS Counters是一个很有意思的特性，它配合 content 属性和伪元素可以实现自动编号的效果。它是CSS2.1提出的标准，主流浏览器对它的支持很好，即使是IE8都支持。利用CSS Counters可以实现“标题自动编号”、“复杂样式的有序列表”等等以前需要后端配合才能实现的样式。例如下面是由RED TEAM DESIGN提供的特殊有序列表样式：
对于那些终于找到了自己热爱的编程工作的开发者们来说，他们常常会遇到一个难题：用编程谋生固然美妽，但当你不得不反复做着相同的任务时，这份热爱还会持续吗？我们知道，编写CSS可能看起来很有趣，但如果要重复进行，情况可能就大不相同了。
Atom支持语言特定的设置。你可以在Markdown文件中软换行，或者在Python中把tab的宽度设置为4。
css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。
自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。
看目录结构清晰明了，由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制，如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题，会产生非预期的页面样式渲染结果。
最近公司的一个新项目上马，我被安排来做项目初始化，前端初始化的时候使用了 Vue3 + Tailwind CSS + NaiveUI，在搞基础布局的主题变化时出现了本次插曲。
CSS 的全局性 相当长一段时间 CSS 总是在页面上作为一个全局的存在，以前这个『特性』影响还不算很大，命名上注意一点，比如使用 BEM 也能一定程度上解决问题。 但是随着 web 组件化的需求越来越强烈，CSS 的这种特性开始成为束缚开发者自由飞翔的绳索，每一个 CSS 类名都有可能产生意想不到的冲突，或者被各个组件覆盖来覆盖去，每当修改一个组件时，我们必须谨小慎微，注意是否会在全局环境下产生冲突。 更严重的是，组件化的背景下，JS + 模板 + CSS 才能称为一个完整的组件，每个组件如果单独引用一个
上一期堡堡给大家讲解了简单的页面交互效果 - 点击块，让块动起来，让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块，让块动起来，可以回复“交互”到“HTML5学堂”公众号。而今天我们主要讲解JS简单页面交互实战 - 点击按钮实现求和功能。 Tips：由于上一期的文章篇幅过长，微信的文章有字数要求，所以小编把部分的内容（作用域）放到这一期进行讲解。 继上一期的内容 - 作用域 作用域 我们知道函数就是把多条语句封装起来，那封装起来了，在其它地方能否访问的到？具体看下面的实例。 实例： var n
从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。
时间是过得真快，从刚开始决定 all in tailwindcss，到现在非常熟练的使用，已经过去了一个多月的时间了。在这个期间，我写了几篇文章给大家分享我的使用感受。但是呢，还是有很多人不理解我为什么如此推崇它，因此，我决定再写一篇文章，来跟大家分享一下，在真实项目中，我是如何使用 tailwindcss 的。
LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器，也可以在开发环节使用 LESS，然后编译成 CSS 文件直接使用
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计
就像 React 一样，CSS 工具 Tailwind 经常在 Web 开发者圈子中进行辩论。它非常受欢迎，但也有它的反对者。
相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。
CSS 里面的伪元素其实是非常好用的，但是经常容易被大家忽略，伪元素里面常用到的 content 属性，可能现在很多人仅仅以为 content 属性的值只支持字符串，除了字符串外常用到的还有 uri、counter ，今天所要介绍的就是 conter(计数器)。
HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML
这一节比较琐碎、基础，但也很有学习的必要，各种运算符、if控制语句、循环控制语句都是在代码编写中常用的语法。
作用域链： 在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。
https://juejin.cn/post/7237425753612288055
行内元素和块元素的区别 概念 块元素：默认独占一行，页面中垂直排列，宽高和内外边距可控 行内元素：默认同行排列，宽高由内容决定 行内元素和块元素举例 块元素：、、、 行内元素：、、、<input> 行内元素和块元素的相互转换 display:inline;将块元素转换为行内元素 display:block;将行内元素转换为块元素 display；inline-blockl;行内块元素，既有block的宽度高度特性，也有inline的同行特性02【腾讯云前端性能优化大赛】前端性能优化最佳实践如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，用户对于网页的打开速度要求也越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。06第128天：less简单入门> 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 > [官网](http://lesscss.org/) > [中文网](http://lesscss.cn/) > http://www.w3cplus.com/css/less04理解CSS模块化在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。04单页Web应用：JavaScript从前端到后端https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html022015.11.30 HTML5真题练习HTML5学堂：每天一道题，强壮程序员！今日主要涉及昨日题目的解答，以及一道涉及函数的形参实参、arguments对象的题目 HTML5真题【2015.11.29】答案解析 昨日真题题目如下，问的是result和username，分别是多少？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5学堂 - H5course</title> <meta name="viewport" content="width=device-wid06前端开发，关键技术点杂烩缓存：ETag Expire Last-Modified 三者合用，Expire 可以让浏览器完全不发起 Http 请求，若 F5 发起请求，也可以通过判断 ETag（对应浏览器字段 If-None-Match） 和 Last-Modified （对应浏览器字段 If-Modified-Since）字段是否需要更新资源还是使用 304(Not Modified) 的本地资源；03前端关键技术点杂烩，这些你必须知道这里总结一下 WEB 前端面试的常见问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的，资深工程师则要对这些基本概念的纵向深度进行挖掘（作者：YHSPY）。02无需书写 CSS！只需关注HTML，即可快速构建美观的网站Tailwind CSS 是一个实用工具优先的 CSS 框架，它提供了一系列低级别的 CSS 类，这些类可以直接应用于 HTML 元素上。与传统的 CSS 框架（如 Bootstrap、Foundation）不同，Tailwind CSS 不提供预定义的组件，而是通过组合这些基础类来构建用户界面。其核心理念是通过小而单一职责的工具类来实现高度的可定制性和灵活性。01扫码添加站长 进交流群领取专属 10元无门槛券手把手带您无忧上云相关资讯如何避开变量作用域的陷阱Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代CSS-in-JS：一个充满争议的技术方案在原生CSS中使用变量2020 年的 JavaScript 后起之秀热门标签更多标签云服务器ICP备案对象存储实时音视频即时通信 IM活动推荐运营活动广告关闭领券
、
如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，用户对于网页的打开速度要求也越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。
> 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 > [官网](http://lesscss.org/) > [中文网](http://lesscss.cn/) > http://www.w3cplus.com/css/less
在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。
https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html
HTML5学堂：每天一道题，强壮程序员！今日主要涉及昨日题目的解答，以及一道涉及函数的形参实参、arguments对象的题目 HTML5真题【2015.11.29】答案解析 昨日真题题目如下，问的是result和username，分别是多少？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5学堂 - H5course</title> <meta name="viewport" content="width=device-wid
缓存：ETag Expire Last-Modified 三者合用，Expire 可以让浏览器完全不发起 Http 请求，若 F5 发起请求，也可以通过判断 ETag（对应浏览器字段 If-None-Match） 和 Last-Modified （对应浏览器字段 If-Modified-Since）字段是否需要更新资源还是使用 304(Not Modified) 的本地资源；
这里总结一下 WEB 前端面试的常见问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的，资深工程师则要对这些基本概念的纵向深度进行挖掘（作者：YHSPY）。
Tailwind CSS 是一个实用工具优先的 CSS 框架，它提供了一系列低级别的 CSS 类，这些类可以直接应用于 HTML 元素上。与传统的 CSS 框架（如 Bootstrap、Foundation）不同，Tailwind CSS 不提供预定义的组件，而是通过组合这些基础类来构建用户界面。其核心理念是通过小而单一职责的工具类来实现高度的可定制性和灵活性。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
