模块8.5：CSS回顾、调试与未来策略
1.CSS的特殊性、样式优先级和！重要级
经过这些对CSS的实践，你的脑海中是否出现过这样的问题："CSS的含义是什么？"
CS是 "层叠样式表 " 的缩写，虽然你知道样式和表的含义，但你可能不知道层叠 这个词的含义**。** 你最好在谷歌上搜索一下，它会告诉你，它的意思是："（水）迅速地、大量地往下倒"。
所以，从这里你可以了解到CSS是如何工作的，它主要是往下工作。同一属性的最新规则只在覆盖 前一个规则时才起作用。
还有一种叫做 "特定性 "的东西，你应该知道。如果有两条或更多相互冲突的CSS规则指向同一个元素，浏览器会根据一些规则来确定哪一条是最具体的，从而胜出。可以把特异性 看作是一个分数/等级，它决定了哪些样式声明最终被应用于一个元素。
特异性层次。
内联样式 > IDs > 类、属性和伪类 > 元素和伪元素
特异性层次结构
你应该这样计算 特异性。
从0开始，为样式属性加1000，为每个ID加100，为每个属性、类或伪类加10，为每个元素名称或伪元素加1。这里有一个例子给你。
计算特异性
最重要的是，有 一张王牌可以用来给一个属性/值添加比正常情况下更多的重要性，这就是CSS中的"**！重要 "**规则。
事实上，如果你使用**"!important "** 规则，它将覆盖该元素上该特定属性的所有先前的样式设计规则
但你应该在没有其他选择的情况下使用这个属性。所以，使用**"！重要 "** 时要谨慎。
2.(高级）CSS自定义属性，变量和计算
**var( ) "**函数[自定义属性]是用来插入一个CSS变量的值的。使用CSS变量的一个好方法是当涉及到你设计的颜色时。与其反复复制和粘贴相同的颜色，你可以把它们放在变量中。var( ) 函数是用来插入一个CSS变量的值的。
var(- -name, value) [变量名称必须以两个破折号**（- -）** 开头，并且区分大小写！] 。
要创建一个全局范围的变量，请在**":root "选择器中声明它。:root "** 选择器匹配文档的根元素。要创建一个局部范围的变量，请在要使用它的选择器中声明它。
"**calc( ) "**函数执行一个计算，作为属性值使用。
**计算()**有很多用法，可以帮助计算更容易。
3.使用chrome devtool Elements标签进行CSS调试
了解Chrome的Devtool对于调试来说是非常重要的。
Chrome开发工具
在你想调试的网页上点击右键，选择 "检查 "或按Ctrl+Shift+I或按F12，一个窗口将打开。现在，转到DevTools的Elements面板。在这里，你可以很容易地对你的文件进行修改，并立即看到结果，还可以调整很多你甚至没有想到的东西。你可以为一个元素添加CSS声明，为一个元素添加CSS类，为一个类添加伪态，改变一个元素的尺寸，改变FlexBox的方向，还可以玩玩CSS网格。
4.高级选择器、Airbnb CSS样式指南、BEM
当你的网站变得庞大时，管理所有的CSS代码就变得非常困难。在一个像样的网站上，有几千行代码，甚至几十行。因此，最好是维持一个成熟的程序来管理所有的CSS文件。
你必须了解一些 高级选择器 ，如属性 选择器、子选择器、同级组合器 （相邻同级组合器、一般同级组合器）、伪类（动态伪类、:第一个孩子、语言伪类）、CSS 3伪类 （:目标，UI元素状态伪类），CSS 3结构 伪类（:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :last-child, :first-of-type And :last-of-type, :only-child, :only-of-type, :empty），否定伪类，伪元素（:第一行，:第一字母，:之前& :之后）。如果你想阅读更多的内容，你可以点击这里。
驯服高级CSS选择器 - Smashing Magazine
因此，对于管理大量的CSS代码，你可以尝试为所有的东西建立单独的文件，比如为变量或表格保留一个文件等。
有一些行之有效的策略，如OOCSS、SMACSS、SUITCSS、Atomic、BEM （块、元素和修改器）等。所以，最好是遵循其中的一个，如BEM。如果你想了解更多关于BEM的信息，你可以在这里进行了解。
还有一件事，你必须遵循一些CSS指导线，因为遵循这些指导线，你就会知道如何编写规则，你应该使用多少空格，如何缩进代码，如何在哪里注释。你可以从这里查看《Airbnb CSS / Sass Styleguide》 。
如果你想的话，请遵循 所有这些准则。这些只是我的建议 ，是为了让你更好的发展。
5.你对HTML（HTML5）和CSS（CSS3）的未来战略
现在我来说说一些铺垫学习之路的策略。如果我是你，我就会遵循它们。至于你愿不愿意，那就看你自己了。
所以， 第一件事是， 你应该至少翻阅一遍之前的所有文件，向大家问好！ 这是最重要的。不，只是开玩笑，至少检查一下，你能记住所有这些主题吗？如果你能，那也没关系；如果你不能，也没关系。只要再看一遍，就可以了。
**第二，**你应该再次浏览所有的HTML5标签，并尝试记住每个标签的工作。如果你记不住，也完全没关系。然后试着看看它是如何工作的。但你必须完成所有的标签。不要试图记住任何一个标签，通过使用越来越多的标签，你会自动认识它们。
第三， 用**"CSS属性 "玩同样的游戏。**
第四，也是最重要的一点， 在学习时不要感到沮丧。因为感到困惑和迷失方向是很正常的。只要保持通过搜索学习的能力，以及如何有效地使用这些东西，这就够了。是时候在你的脑海中来一次小小的旋转了。另外，接受你会忘记大部分事情的事实，这是人类的天性。
但真正的问题是，"你愿意重新学习吗？" 还是不愿意？
如果你什么都知道，那么高级开发人员或项目经理，甚至技术负责人的工作是什么？😂😂
所以，顺其自然，保持积极性，继续学习！！。
😁😉😋😎🤑!!!YAHOOOO !!!!🤑😎😋😉😁
虚拟的👏👏拍手不会让你的手掌受伤😏😏
Web Dev Streaks Day - 10 (Milestone 2: Responsive Web Layout)原文发表于Nerd For Techon Medium，在那里人们通过强调和回应这个故事继续对话。
