前端技能自查——CSS

写在最前面，希望大家能用心体会。
优秀的代码都应该从统一的命名规范开始。对于任何一套代码来说，良好的命名规范是代码健康成长的基石。
尽可能的使用常用技巧，减少使用奇技淫巧来考验同事

命名建议与约束，从团队角度出发，如何写出易维护的CSS

CSS 代码的重复率是很高的，尤其是多人协作的项目。
下面的建议能增强代码可读性、易维护、整体结构清晰，也为后续的架构优化、性能提升带来可能，甚至降低整改成本。

• 强烈建议统一使用小写英文字母，两个单词之间用 “-” 隔开
• 对于作用于全局的样式，要有统一的前缀辨识
• 推荐使用英文单词来表述，由于汉语拼音的声调歧义，无法做到意义唯一。此处推荐项目建立自有术语库，使整体团队在命名选择时保持一致，提高团队协作效率
• 禁止随意、无意义、难理解的命名出现
• 在命名长度方面，不要过长，英文单词太长的建议进行缩写，并录入项目术语库中，团队成员对其意义的认知一致即可

CSS选择器有哪些

• id： #xxx
• class: .xxx
• 元素选择器：HTML标签或者自定义标签
• 相邻选择器：.class + .class div + div
• 子元素选择器 (.class > .class) > (div > span)
• 后代选择器: (.parent .child/ .grandson) > (div p span a)
• 通配符选择器: *{}
• 伪类选择器: a:hover
• 属性选择器： [attribute]{}
  [attribute] 用于选取带有指定属性的元素。
  [attribute=value] 用于选取带有指定属性和值的元素。
  [attribute~=value] 用于选取属性值中包含指定词汇的元素。
  [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
  [attribute^=value] 匹配属性值以指定值开头的每个元素。
  [attribute$=value] 匹配属性值以指定值结尾的每个元素。
  [attribute=value] 匹配属性值中包含指定值的每个元素。
• 伪元素： ::before ::after

CSS权重从大到小说一下

声明方式	值
!important	最大
style	1000
id	100
class	1