我在超过条的调查回复中发现，CSS的难度位居榜首，因为它是Web开发人员必须掌握和使用的技术，同时，也是他们觉得最痛苦的技术。并且他们还说CSS太混乱了，太难了。
甚至有人说CSS在设计上很糟糕，无法保护应用程序商店，但我认为CSS很棒，它绝对臃肿且难以全面学习，但这只是因为它在过去25年中不断发展的原因。
在Netscape是顶级浏览器的时候，CSS就出现。响应式布局的想法已经过去十多年了，因为越来越多的浏览器进入市场，他们都以不同的方式实现了CSS，导致代码可以在一个浏览器中运行，但在另一个浏览器中，可能需要你编写一堆浏览器的前缀，以使其在所有浏览器上都能正常工作。
所以，我完全理解为什么你会讨厌CSS，但今天，我于分享的是一个小课程，你将学习如何使用现代功能编写干净的CSS，同时避免在年以及未来不应该编写糟糕的代码。
你需要知道的第一件事是如何学习CSS，下面我们正式开始吧。
1、学习盒子模型
不学习CSS的方法是使用像Bootstrap或Tailwind这样的框架，它们是可以帮助你快速获得漂亮UI的性感工具。但是如果你在项目中使用像Tailwind这样的东西，就像结婚一样。一方面，你不会去学习CSS基础知识，你会认为学习这个很顺利；另一方面，如果你改变主意，你将不得不经历一个非常痛苦的时期。
当学习基本的CSS时，你将更好地控制你代码的创造力和自由度，直到我进入Web开发职业生涯后，我才得到的最好建议是学习CSS盒模型，因为当你理解它时，语言开始变得更有意义，事实上它很简单，我现在就教你盒子模型，把每个HTML元素想象成盒子里面的盒子，你有可以有宽度和高度的内容，你可以在周围添加填充那个盒子来挤压内容，然后，你可以在外面添加一个边框，然后，在边框周围添加额外的不可见空间，称为边距。
CSS中与布局和位置相关的所有内容都受框模型的影响，如果你打开chrome开发工具，你可以看到如何在页面上的任何元素计算框模型。
2、Firefox很棒
这给我带来了第二个提示，在调试CSS时不要使用chrome，而Firefox，他们的开发工具通常更胜一筹，尤其是在CSS方面，如果我检查元素，我会像在Chrome中那样对框模型进行细分我还可以直接编辑它的属性，Firefox会为我提供影响框模型的所有属性的细目分类。
它还在HTML中提供了有用的注释，例如当一个元素导致另一个元素溢出时，Firefox还为flex和网格布局提供了非常漂亮的图形，谈到哪个布局或元素相对于彼此的位置历来是最重要的布局之一。在具有挑战性的CSS方面，例如如何在水平和垂直方向上居中div的古老问题。
3、Flexbox很棒
一种选择是给子元素绝对定位，然后使用top和left属性移动到右下角，然后将其转换回50%，以将其放在可以工作的中心，但现代CSS有一种更好的方法是使用flexbox，允许你在UI中的任何位置创建灵活的列或行，当元素具有显示flex时，它还具有x和y轴，你可以在其上对齐其子项。
子元素以一种称为主轴的方式流动，可以使用justify-content属性在中心对齐，垂直于交叉轴，我们也可以使用align-items属性将元素移动到中心。
当涉及到布局时，Flexbox通常是我使用的第一个工具，但它确实有一个主要缺点，如果你有一个包含许多相交行和列的大型复杂UI，你最终可能会在HTML中使用大量容器或包装元素。
这些元素没有语义意义，只是在那里，所以你的CSS代码可以附加一些东西，幸运的是，有一个称为网格的现代CSS功能可以消除你的大部分代码。
4、Grid很棒
Grid与只处理单独的列和行的flexbox不同，如果你是一个工作较长的web开发者的话，你可能会觉得Grid有点眼熟，因为它与表格布局非常相似。
Grid允许你考虑大图布局，当你将元素设置为显示网格时，它对开发人员更加友好，你可以将其子项定义为一堆列和行。
列的宽度可以用网格模板列属性定义，我们在这里有三个值：
由空格分隔，这意味着我们有三列注意fr值或小数单位将负责与网格中的其他列共享可用空间，我们还可以定义一些行，现在网格内的每个元素都将自动定位，但重要的是请注意，与flexbox布局或上帝禁止的表格布局相比，我们已经消除了大量的HTML和CSS。
5、Clampitdown
现在，当我们谈论响应式布局时，有90%的时间我们谈论的是根据设备或视口上的可用空间来更改某些内容的宽度。有很多方法可以做到。
例如，你可能有一篇文章的首选宽度为50%，但在小屏幕上，你希望将其固定为像素或在大屏幕上固定为像素，你可以通过编写将有条件地应用CSS的媒体查询来实现基于视口大小，唯一的问题是媒体查询会让你想要随着项目的增长而离开自己。
好消息是你可以使用min、max和clamp等函数来扭转局面。
我们可以重构这段代码，将宽度设置为一个最小为像素，最大为像素的区间值，然后首选值50%将13行代码变成一行代码，以减少92行代码。
说到代码缩减，这是CSS中的一个小技巧，我们经常以这些非常长且难以阅读的类名结束。
但是，你可以使用emoji字符作为类名而不是灵活的容器。
6、纵横比单线
现在，如果你曾经不得不编写保持特定纵横比的响应式图像或视频，那么下一个技巧真的会让你大吃一惊，我最近不得不在fireship.io上这样做，以嵌入具有16×9纵横比的视频，这需要hack，你在顶部放置56.25填充然后给子元素绝对定位。
今天，虽然不是所有地方都支持它，但我们可以使用宽高比属性而不是填充废话，我们可以在视频上定义宽高比，我们就完成了。
消除CSS代码是让它更有趣的一个重要部分，但同样重要的是让你的代码更灵活。所以重构不是一个彻底的噩梦，一个很好的方法是使用CSS自定义属性或变量来实现。
7、变量的变量
注意我们如何在多个地方使用相同的颜色值，如果我们决定更改颜色，我们需要修改引用它的每一行代码，更好的方法是在根选择器上定义一个全局变量。
然后，可以在任何需要的地方引用，现在当你决定更改它时，你只需修改一行代码变量级联，就像CSS中的其他所有内容一样，这意味着你可以通过在树的更深处重新定义它们来覆盖它们：
你还可以将它们组合成更复杂的值，例如我们可以根据其他三个变量的值定义我们的RGB颜色，这种灵活性将通过允许你快速更换网站的不同主题来真正改变。
8、花式计算
现在，CSS并不是传统意义上的真正编程语言，但它确实具有使用calc函数运行基本计算的能力，它允许你使用一些基本数学计算一个值。但真正酷的是你可以结合使用不同的单位，比如你可能想从我们的代码中的当前视口宽度中减去50像素，我们有一个动画，其中元素从顶部下降。
但我们想错开它们，让它们一个接一个地出现。
实现这一目标的一种方法是为每个元素应用不同的动画延迟，但这是非常重复且难以重构的。
一种更复杂的方法是为每个定义其顺序的项目定义一个内联CSS变量，然后我们可以将动画延迟定义为顺序变量次毫秒的计算。
而且，现在我们可以处理无限数量的元素，而不会增加我们的CSS占用空间，这要归功于calc和变量的组合能力。
9、计数器状态
我刚刚说过CSS不是一种编程语言，但你是否知道它实际上内置了一个状态管理机制，你可以在不编写任何JavaScript代码的情况下跟踪CSS代码中的运行计数。
如果你想在你的HTML中给标题编号，最简单的方法是在HTML中手动添加这些数字。
因此，如果你想拼接一个新标题，则必须手动重新编号所有内容，一个更智能的方法可能是CSS计数器，你可以使用counterreset属性在代码中创建一个计数器。给出你想要的任何名称，然后在应用所需的选择器时增加它，它将从0开始，然后向dom中的每个h1元素添加1。
现在你永远不必担心在你的HTML中给东西编号，在构建一个复杂的下拉菜单时，你可能会假设一些JavaScript涉及到管理菜单的打开和关闭状态，但是你可能会惊讶于仅使用简单的CSS就能做到多远。
现在，你很可能熟悉，当你进入表单输入或单击按钮时应用于元素的焦点伪类。
问题在于构建下拉菜单时，你可能会使用焦点打开菜单，但是当你单击该菜单内的某些内容时，它会失去焦点并关闭。
那是当你使用JavaScript来管理状态时，还有另一个称为focus-within的伪类。如果任何孩子也有焦点，它就会保持活动状态，并且一个简单的功能可以消除许多用于切换状态的JavaScript。
这些方法可以让你的CSS代码更简洁。
但请记住我在文章前面提到的那些浏览器供应商前缀的事情。
这些东西不会消失，幸运的是，我们确实有一些方法，可以使它几乎不引人注目。你应该知道的一个工具是postCSS，它本身使用称为自动前缀的工具来自动添加所有供应商前缀。
此外，它允许你使用现代CSS功能，即使它们在你的目标浏览器上不受支持。
此外，你可能会研究预处理器，例如：as、less或stylus，但我们会将它们保存到以后的文章中。
总结：以上就是这篇文章的全部内容了。
如果有兴趣，欢迎进行探讨，我在评论区等你！！