作为一个之前并没有多少经验的入门选手，在学校课程中完成作业的时候，发现css的使用是一个非常令人头疼的事情，每次进行css的修改时，几乎很难看到令人满意的格式变化，而且经常发现有些格式是无法展示出来的，在青训营系统学习了css之后，这一情况有了明显的改善，这篇笔记我将结合讲座所介绍的css知识，以及在大项目中的css实践，对学到的以及用到的css知识进行总结。本篇主要对除去布局之外的CSS使用进行梳理。
CSS：在页面中使用CSS
讲座介绍了三种方式：外链，嵌入，内链，尽管有提到推荐与不推荐的方式，但是在项目的实际使用中，由于框架与CSS工具的应用，原生的CSS已经很少被直接使用在页面中了，比如此次大项目中，我们组使用了SCSS与UnoCSS，前者可以对应每一个tsx文件给予格式，后者虽然类似于内联的方式，但也是直接作用于tsx。
CSS：选择器：
讲座中介绍的选择器有以下几种：通配（*），标签（语义化），ID（每个CSS只存在唯一的ID），类，属性（使用[]进行选择，$,#等符号进行href的适配）。由于在SCSS中我们几乎会给每一个标签classname，因此类选择器几乎占据了所有常见的情况。
CSS：伪类
伪类分为状态性伪类与结构性伪类，在项目中，几乎所有的实践都集中于状态性，由于我经手的部分是搜索界面，最常用的就是focus/active/hover三种在按钮上的应用，结构性伪类的css内置于使用的react-autosuggest库中因此并没有显性的使用场景。
CSS：组合
组合场景分为直接，后代，亲子，相邻，兄弟，由于伪类的使用，直接组合的场景最为常见，后代由于使用SCSS可以进行类似于html的嵌套，并没有明显的直观体现，但其实也是其原理的应用。
CSS：颜色
作为队伍中的设计师角色，颜色的使用基于ant design的色板，对小组倾向的风格进行个性化的定制，之后的应用都是基于此，目前在项目中使用的应该为rgba格式。
CSS：字体与段落
字体实践不多，但是英文应该使用无衬线字体，当信息量较大的前提下，在视觉效果上可以避免过于杂乱，字体的大小与使用场景依然基于ant design的设计规范实现，至于段落的缩进，目前基本上使用默认的左对齐和大部分组件场景所需要的居中。
CSS：调试
这一部分是在实践中长进最多的部分，CSS作为前端实践中最直观的成分，使用浏览器进行调试是非常直观且方便的，尤其是对于并未体现在外观的CSS的问题，当检查某一个元素时，我们可以在右边的styles一栏中看到目前应用的的CSS文件，哪些文件被用到，哪里因为无效变成了灰色的disable状态，通过右侧的惊叹号提示可以知道未被应用的原因，这些都可以很好地辅助我们进行CSS的修改与迭代。
CSS：继承
这一部分在理解上非常令人头痛，但鉴于大部分项目的格式都较为简单，并且SCSS可以较好的展示继承的层次状态，我们在实践中并不需要大量地计算比较继承值的特异度，如果遇到问题通过调试也可以快速发现问题并进行修改。
