CSS是一门正儿八经的编程语言，请把态度都给放端正！

也许简历里写着精通CSS的你看到这标题就笑了。CSS也算编程语言？

CSS 确实很简单。另外我可以保证，就算是傻子也能写出下面的代码：

1. p {

2.  color: red;

3. }

既然写CSS很容易，你知道多少个单位？知道多少种垂直居中方式？

既然写CSS很容易，你知道 font-display contain will-change都是什么属性吗？

既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？

我们来看看下面这三个图，你能用CSS做出来吗？

先思考思考这几个形状的CSS做法……如果你平时就知道写写简单没创意的CSS，认为CSS就是各种框架一套一改就OK，那么我猜你是肯定写不出来的。

我们先来看看第一个心型：

1. .heart{

2.    position: absolute;

3.    top:50%;

4.    left: 50%;

5.    transform:translate(-50%,-50%) rotate(45deg);

6.    background: red;

7.    width: 100px;

8.    height: 100px;

9. }

11. .heart:before,

12. .heart:after

13. {

14.    content: '';

15.    position: absolute;

16.    top: 0;

17.    left: -50px;

18.    width: 100px;

19.    height: 100px;

20.    border-radius: 50%;

21.    background: red;

22. }

23. .heart:after{

24.    top: -50px;

25.    left: 0;

26. }

这个心形的主要知识点是伪元素和 border-radius ，这两点你应该都会，但是你能做出这个心型吗？

我们再来看看消息框：

1. .bubbly{

2.  position: absolute;

3.  top:50%;

4.  left: 50%;

5.  transform:translate(-50%,-50%);

6.  width: 150px;

7.  height: 50px;

8.  background: #fff;

9.  border-radius: 5px;

10.  line-height: 50px;

11. }

12. .bubbly:after {

13.  content: "";

14.  display: block;

15.  position: absolute;

16.  width: 0;

17.  height: 0;

18.  border: 10px solid transparent;

19.  border-right-color: #fff;

20.  top: 15px;

21.  left: -20px;

22. }

这儿主要知识点是伪元素和边框。

弧形切角

1. .arc{

2.    position: absolute;

3.    top:50%;

4.    left: 50%;

5.    transform:translate(-50%,-50%);

6.    width: 80px;

7.    padding: 80px;

8. }

9. .arc {

10.    background:

11.            radial-gradient(circle at top left,

12.            transparent 15px, yellowgreen 0) top left,

13.            radial-gradient(circle at top right,

14.            transparent 15px, yellowgreen 0) top right,

15.            radial-gradient(circle at bottom right,

16.            transparent 15px, yellowgreen 0) bottom right,

17.            radial-gradient(circle at bottom left,

18.            transparent 15px, yellowgreen 0) bottom left;

19.    background-size: 50% 50%;

20.    background-repeat: no-repeat;

21. }

这个弧形切角则是运用了radial-gradient(径向渐变)

如果你此刻还是觉得自己很厉害可以去看看https://codepen.io/ ，那些大神用CSS做的各种酷炫效果以及各种神一般的运用，CSS教你做人 打击打击自己

从上面的几个小例子可以看出，CSS的难点在不再于它的语法，而在于强大灵活的运用。然而又有多少人，从刚学前端还是到现在，都没有把 CSS 作为一门正儿八经的编程语言。甚至于没有去全面的深入学习下，而是在写页面时不断去试？

如果你在一个开发规范不怎么规范的公司呆过，一定遇到过这种情况：后端开发工程师在开发时把你写得的前端样式弄得惨不忍睹，然后在他实在改不回来的时候，他便会来寻求你的帮助，美其名曰：我微调了下，出了点问题，你花两分钟给改改。打开一看各种 !important 、行内样式，然后一改就是一两个小时。。。

出现这样的情况的原因还是在于，对于CSS的认识不足，认为它很简单阿猫阿狗都能驾驭。但是甚至于大部分前端所掌握的CSS都只是冰山一角。

或许此刻你已经意识到了CSS真的不简单了。那么我们改如何应对？规范，命名约定，预处理器，后处理器，还是端正态度全面掌握好基础？