N年CSS开发总结的20条CSS开发技巧，适合高手新手小白！！

flex布局： https://flexboxfroggy.com/



Grid布局： https://cssgridgarden.com/ and



CSS选择器：https://flukeout.github.io/

3. 一部分的CSS级联样式是比较奇怪的。html元素可以通过各种方式设置样式，根据您为元素设置的式样，某些原生的式样会被覆盖。编写内联样式将覆盖任何样式。id选择将覆盖class的样式。可以参考这篇文章：see this post on calculating CSS specificity - Star Wars edition!

4. 用 CSS 修复 HTML 中的缺点不是一个好主意。首先修复您的 HTML。

5. HTML 中的伪元素也可以设置样式，并在样式元素方面提供方便的技巧。最著名的是::beforeand ::after，但总共有七个伪元素。

6. CSS 允许组织网页上的元素。甚至还有一些布局系统——最著名的包括 Grid、Flexbox、浮动和表格（按从新到旧的顺序）。

7. 如果您的项目的浏览器支持允许，一定要尝试一些最新的 CSS，例如 Grid。如果人们太害怕尝试新的 CSS，即使它还没有完全的浏览器支持，那么没有人会尝试它！使用https://caniuse.com检查浏览器支持。

8. 网页上的元素可以使用多种不同的值来调整大小和间隔。有px, ems, rems, ch, vw, vh, %, 等等。在构建更复杂的网页时，元素大小或间距值的相互作用会对样式的易用性和可维护性产生很大的影响。

9. 对于编写 CSS 的每一种速记方式，很可能都有一种编写 CSS 的速记方式。例如margin: 20px 30px 10px 15px可以是margin-right: 30px, margin-left: 15px, margin-top: 20px, margin-bottom: 10px。对于阅读您的 CSS 的其他开发人员来说，编写长手版本有时会更清晰！

10. 您可以直接在浏览器的开发工具中更改 CSS（要打开它们，请右键单击浏览器窗口并选择“检查”或“检查元素”）。最棒的是，任何样式都不会被保存，因此您可以在这里进行实验！开发工具的另一个优点是“计算样式”选项卡，因为它可以准确显示当前应用于元素的样式。这在调试 CSS 时非常有用！除了计算样式外，开发工具还将显示布局样式，让您清楚地指示将哪些边距、填充和边框应用于元素。

11. Stack Overflow和CSS Tricks是两个与 CSS 相关的问题的朋友。

12. 检查 MDN 文档以获取最新的 CSS 文档。他们甚至为许多 CSS 属性提供了一些实时游乐场 - 例如https://developer.mozilla.org/en-US/docs/Web/CSS/transform。

13. 了解相对位置和绝对位置是值得的。我的意思position: relative是具有子（嵌套）元素的父元素带有position: absolute.

14. 一个网页往往由许多不同大小的盒子组成。每个元素实际上被浏览器视为一个框 - 标题、段落、跨度，一切。每个框由 4 项组成 - 元素的内容、填充、边距和边框。默认情况下，盒模型声明您添加到元素的任何边框或填充都将添加到元素的宽度或高度之上。这可能令人困惑或违反直觉。设置box-sizing: border-box告诉元素在添加边框或填充时不要增加宽度或高度。而是调整内容大小。

15. 除非您确定正确管理自己的焦点状态，否则不要删除默认的浏览器焦点轮廓。

16. 有很多 CSS 预处理器允许您使用自己独特的语法生成（编译）CSS，这通常提供了一种以更有条理、更短或更实用的方式编写 CSS 的方法。当心使用预处理器，因为它们对于许多项目来说可能是过度的，创建过大的编译 CSS，或者使 CSS 在未来难以重构。预处理器的示例包括 Sass、Less 和 Stylus。

17. CSS 自定义属性（又名 CSS 变量）是开发人员摆脱 CSS 预处理器并仍然获得好处的一种方式。它们允许您在变量名称下定义特定值。这些变量可用于任意数量的元素，如果值需要更改，只需在一处更改即可。例如，含有一个大的字体大小，如一个可变–fontSizeL: 150%可以在这样许多不同的元素一起使用：font-size var(–fontSizeL)。如果该值需要更改为140%，则可以快速轻松地完成一次。不支持 Internet Explorer，但存在 polyfill 来解决这个问题！