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

时间: 2019-09-13阅读: 198标签: 技巧

如何能提高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前端行业的人来说,就业是个大问题,也直接影响着各个的决定。因此,选择专业的学习比较好,不仅理论基础扎实,还有丰富的项目开发经验,有明确的职业规划和娴熟的面试技巧,为自身的快速就业提供了可能。

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/5271

5个有趣且不必要的 JavaScipt 技巧

在进入列表之前,请快速注意一下。我看到了对上一篇文章的一些回复,并想清除一些内容。我知道并不是该列表或上一个列表中的所有条目可能都是真正有用的或推荐的做法,但这不是我的目标。

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助。每个单词的首字母大写一般我们会用JS实现,其实CSS就可以实现。

13 个 JS 数组精简技巧

数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一点

缩短箭头函数的技巧

使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:参数括号 (param1, param2)、return 关键字、甚至大括号 { }。面就让我们来探讨一下如何使箭头函数简洁明了

灵活运用JS开发技巧

何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步,每写好一篇文章,都会使用大量的写作技巧

vue基础实用技巧

Vue以前听说过,有了解过一点。当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的一些方法

Vue 开发必须知道的 36 个技巧

Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;

web性能优化的15条实用技巧

javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事

10个让你受益匪浅的css使用技巧

在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器),当我们使用3D transform变换的时候,如果祖先元素没有overflow:hidden/scroll/auto等限制

你可能不知道的64个非常实用的JS小技巧

何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。每写好一篇文章,都会使用大量的写作技巧。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全