如何能提高CSS编写技巧 提高Web前端开发效率

如何能提高CSS编写技巧？怎么学好Web前端开发？很多人在学习Web前端时，刚开始都会学习HTML和CSS，HTML用于文本内容，CSS用于样式设计，掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失，因此你需要掌握一些技巧，以提高CSS编写效率。

1、使用flex进行布局

flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。

flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。

2、注意外边距折叠

与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。

解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。

3、所有元素设置为Border-box

大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：

1)content-box(默认)。当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素(100+2*10)。

2)border-box。padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:。border-box的div元素，它的总宽度就是100px，无论它的内边距和边框有多少。

将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。

4、重置元素的CSS样式

不同浏览器对于各种元素的默认样式存在很大的差异，解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码。这样你是在没有任何默认内外边距的基础上进行布局，产生的效果也就是统一的。

网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。

5、更友好的注释

CSS也许不是一种编程语言，但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。需要注意的是，CSS中没有//注释，只有/**/注释。

6、将图片作为背景

当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是标签。这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。

background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。这个问题可以通过CSS object-fit属性解决，到目前为止除了IE浏览器其他的浏览器都可以使用object-fit。

7、不要DIY，多使用代码库

CSS社区非常庞大，不断有新的代码库出现。它们有各种用途，从微小的片段到构建响应式应用程序的整体框架。其中大多数也是开源的。下一次当你面对一个CSS问题时，在你试图费尽全力解决它之前，检查一下Github或Codepen上是否已经有了一个可用的解决方案。

8、使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每个属性需要的前缀是不一致的，你永远不知道到底需要哪一个，如果真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：

在线工具：Autoprefixer

文本编辑器插件：Sublime Text、Atom

代码库：Autoprefixer (PostCSS)

9、压缩CSS文件

为了提高网站和应用程序的加载速度和页面负载，应该使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。市场上有许多不同的方法来压缩CSS代码：

在线工具：CSS Minifier、CSS Compressor

文本编辑器插件：Sublime Text、Atom

代码库：Minfiy (PHP)、CSSO、CSSNano(PostCSS、Grunt、Gulp)

10、验证

验证CSS可能不像验证HTML或JavaScript代码那么重要，但是通过工具运行一下你的代码仍然非常有用。它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。

就像压缩和Autoprefixer一样，有免费的工具可以利用：

在线工具：W3 Validator、CSS Lint

文本编辑器插件：Sublime Text、Atom

代码库：stylelint(Node.js、PostCSS)、css-validator(Node.js)

对于想要入行Web前端行业的人来说，就业是个大问题，也直接影响着各个的决定。因此，选择专业的学习比较好，不仅理论基础扎实，还有丰富的项目开发经验，有明确的职业规划和娴熟的面试技巧，为自身的快速就业提供了可能。

自己是一个6年的前端开发工程师

这里推荐一下我的前端学习交流扣qun：784783012 ，里面都是学习前端的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，从企业招聘人才需求 到怎么学习前端开发，和学习什么内容都有免费系统分享。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击： 加入