在过去几年中，CSS布局已经发生了巨大的变化，现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站，这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中，将会介绍各种CSS布局的基本使用方式以及使用的目的。

CSS自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式，并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式（为此，我建议你阅读“《是时候开始使用自定义属性》这篇文章。同时我想更深入地研究如何充分使用 CSS 自定义属性。

这里所说的绘制是指CSS图像，即使用HTML元素和CSS属性绘制的图像。它们看起来像是Adobe Illustrator绘制的svg，但它们是在浏览器中渲染出来的。我所见过的一些技巧是使用border、box-shadow和clip-path来绘制图像。如果你在Codepen搜索“daily css images”，你会发现有很多优秀的案例。我自己也画了一些，也做过一些极限挑战，就是在一个元素上使用background和尽量使用其他属性来绘制图像。

有人可能会说，CSS很简单，但是“容易”会导致代码混乱。在大家的眼里，使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此，如果你使用的不小心，你的CSS将变得更难处理，而不是更易处理。Sass？困难吗？Sass的嵌套就展示了这一点，使用不当，Sass的嵌套就是地狱。如果你的Sass代码看起来像这样的，那么你肯定可以使用SEM和BIO来改进你的代码。接下来我就将向你介绍这方面的CSS技术。

一些（网站）滚动的效果是如此令人着迷但你却不知该如何实现，本文将为你揭开它们的神秘面纱。我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性，将使你的页面滚动更平滑、美观且性能更好。大多数Web页面不适合单屏显示，所以Web页面出现滚动条被所有用户认为是理所当然的。对于前端开发人员和视觉设计来说，跨浏览器提供良好的滚动体验，同时符合设计，无疑是一个挑战。尽管 Web 标准的发展速度远超从前，但代码的实现往往是落后的。下文将为你介绍一些常见的关于滚动的案例，检查一下你所用的解决方案是否被更优雅的方案所代替。

在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。

在这篇文章中，将使用三角函数的基本概念，重新创建一个更平滑的Loading效果。我知道这听起来很奇怪，但请相信我，这里一定会很有趣。你会惊讶地发现，要编写的代码很少。当然，你可能会担心三角函数相关的知识，事实上是你不需要知道三角学或数学你能理解这篇文章。我将会解释这里的每个圆相关的事情。

虽然我们通常知道在应用程序中构建大多数视图（View）时需要哪些组件（Component），但很多时候我们并不知道这些组件在运行时是什么。这意味着我们需要基于应用程序状态、用户首选项或API的响应来构建一个页面。一个常见的情况是构建动态表单，其中需要整清楚的是：组件是由JSON对象配置的，还是基于用户的答案而更改的字段来构建。所有现代JavaScript框架（比如我们熟悉的Vue、React等）都有处理动态组件的方法。这篇文章将向您展示如何在Vue中实现它。JavaScript为上述场景提供了一个非常优雅和简单的解决方案。

观察者（Observer）是一个观察或注意事物的程序。观察者可以观察浏览器中发生的某些活动并做出相应的响应。观察者类似于狗，观察某些活动，并提醒我们发生了一些不寻常的事情。一旦我们为某些活动获取到狗发出的警告时，我们有责任采取相应的行动。现代浏览器支持的四种不同类型的观察者。

我喜欢使用Vue的原因之一是，Vue中的methods、computed和watchers的使用是多么的有用。如果没有彻底的理解它们之间的区别，就很难充分利用Vue的功能。尽管如此，我看到的大多数人对这个框架感到困惑，他们也会其中的差异感到困惑，所以我们很有必要的去了解一下这方面的知。