英文 | https://javascript.plainenglish.io/9-pro-css-tips-for-web-developers-508b8302ff6f

翻译 | 杨小二

如果你是一名前端开发人员或者想成为一名开发人员，那么，我今天与你分享的9个CSS技巧，你需要知道一下。

现在，我们开始吧。

1、学习盒子模型

你在学习 CSS 时，应该避免使用Bootstrap或TailwindCSS等框架，这些工具非常适合构建漂亮的网站，但如果你还不能正确的了解 CSS，则建议不要使用这些框架中的任何一个。

因为如果你使用了这些工具，你将无法学习作为开发人员应该知道的基本 CSS 基础知识。

一旦你理解了CSS 盒模型，代码中的其他一切就开始变得有意义了。

从基础开始学习 CSS 可以让你更加自由和创造性地控制你的代码。

2、用于调试 CSS 的 Firefox

你应该使用 Firefox 而不是Chrome来调试 CSS，因为Firefox在CSS方面拥有最出色的开发工具 ，当你在 Firefox 中检查元素时，你会看到框模型的细分，你可以在其中直接编辑元素的属性。

此外，Firefox 在HTML 中提供了一些有用的注释。

3、使用弹性盒

元素相对于彼此的布局或定位，一直是开发人员面临的主要问题之一，其中一个问题是如何将 div 水平和垂直居中。一个好的基本方法是给子绝对定位，将其移动到右下角，然后向后平移 50% 以将其放在中心。这种方法可以工作，但非常不直观。

现代 CSS 的一个更好的方法是使用 flexbox，它允许您在 UI 的任何位置创建灵活的列和行。

4、 Clamp VS 媒体查询

人们使用不同的设备访问你的网站，因此，你在处理项目时应牢记这一点。为了创建响应式布局，宽度应根据该设备或视口上的可用空间而定。

例如;

你有一篇宽度为 50% 的文章，对于小屏幕，你希望将其固定为 250 像素，而对于大屏幕，你希望将其固定为 700 像素。 

你可以通过有条件地应用媒体查询来做到这一点，但这最终会得到如下所示的混乱代码。

在这里你可以使用clamp 函数来编写更小更简单的CSS。

5、纵横比单线

假设你必须编写一个响应式图像或一个保持特定纵横比的视频网站。一种方法是在容器元素的顶部应用填充，然后给子元素绝对定位。

但另一种更简单的方法是使用宽高比属性。你可以只定义视频或图像的纵横比。

6、变量的变量

使代码灵活和消除 CSS 代码同样重要，这样重构对你来说就不成问题。实现此目的的最佳方法之一是使用 CSS 自定义属性或变量。

让我们在多行中拥有相同的颜色值并决定更改颜色，一种方法是修改具有该值的每一行代码。但这是重复的。

更好的方法是在根选择器上创建一个全局变量，你可以在任何需要的地方引用它。

现在，当你决定更改颜色时，你只需修改一行代码，所有具有该颜色值的行都将被修改。

7、花哨的计算

尽管 CSS 不是一种编程语言，但它能够使用 calc() 函数执行一些基本计算。

此功能允许你进行一些基本的数学计算，但该功能的更大优势是你可以组合不同的单位。

8、反状态

CSS 内置了一个状态管理机制，你可以在其中跟踪运行计数，而无需使用一行 JavaScript。例如，如果您想跟踪代码中标题的数量，一种方法是手动编写并记住计数。

更聪明的方法是使用 CSS 计数器在移动到下一个标题时进行计数和递增。你可以使用 counter-reset 属性在你的代码中创建一个计数器，现在你不必担心记住代码中的小东西。

9、寻找焦点

当你想要构建一个复杂的下拉菜单时，最常见的方法是使用 JavaScript 来管理菜单的打开和关闭状态。

令人惊讶的是，CSS 可以帮助你解决这个问题。它提供了伪类来创建和打开下拉菜单，但问题是当你选择一个选项时，它会失去焦点并关闭。

但是，还有另一个称为 focus-within 的伪类，如果子元素也有焦点，它就会保持活动状态。这个简单的功能消除了大量的 Javascript 代码。

学习更多技能

请点击下方公众号

想知道上海吃喝玩乐好去处

请点击下方公众号