如何能提高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。

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,工作第六个年头了,与大家分享一些学习方法,实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端

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

原文地址:https://blog.51cto.com/14458119/2436926

时间: 2024-10-13 11:14:27

如何能提高CSS编写技巧 提高Web前端开发效率的相关文章

学完html+css就可以做的web前端开发项目实战——博雅互动

博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序 1 清除默认样式css文件 reset.css 2 可以引入原子类(可以下载,自己整理) base.css 3 公共样式(比如头部,底部很多面相同的样式) common.css (书写一次css文件可以多个html引入) 4 单页面样式(比如首页,游戏页面) index.css game.css(单独只引入一次) 1.1header 结构 1<!-- header头部开始 --> 2<div class="h

学好Web前端开发,必要了解的HTML+CSS的技巧有哪些

HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CSS渲染,逐渐不断成长起来.接下来给大家分享一下阶段学习技巧. 1.合理清晰的HTML文档结构有着重要的意义. 首先,这有利于自己写CSS时选择标签;其次,这方便别人阅读自己的代码;最后,合理的使用语义化标签,也能让方便各大搜索引擎的收录. 2.对标签添加浮动对网页横排有着非常重要的意义. 一开始接触

《编写高质量代码--Web前端开发修炼之道》读书笔记

前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧. 正文 欲精一行,必先通十行. 在前端开发这个领域,一专多能更是非常必要的. table布局缺点: 代码量大,结构混乱: 标签语义不明确,对搜索引擎不友好. css布局:div+css,或者(x)html+css. 代码量少.结构精简.语义清新. 代码量少,浏览器端下载时间就会更短: 语义清晰就会对搜索引擎

web前端开发分享-css,js工具篇

来源:http://www.cnblogs.com/jikey/p/3607133.html web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. php

编写高质量代码:Web前端开发修炼之道pdf

下载地址:网盘下载 作者简介  · · · · · · 曹刘阳,网名阿当,资深Web前端开发工程师,先后就职于中国雅虎和淘宝,现就职于新浪,一直从事Web前端开发工作,实战经验非常丰富,在通过提高代码质量来增强可维护性方面颇有心得.精通HTML.CSS.JavaScript等前端开发技术,对ActionScript.Flex.PHP.RoR等Web开发技术也有较深入的研究.致力于敏捷开发实践,喜欢读书,阅读过大量技术书籍:擅于总结归纳,能将各种技术融会贯通. 目录  · · · · · · 推荐

编写高质量代码:Web前端开发修炼之道(一)

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

web前端开发教程:div+css的6个优点

关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来说,div+css是web设计标准,它是一种网页的布局方法,与传统中经过表格(table)布局定位的方法有所区别,它能够完成页面页面内容与体现相别离, 那么你在前端开发学习对div+css的优点了解多少呢?接下来Div css教程学习中,为大家介绍web前端开发中div+css的6个优点. 介绍web前端开发中div+css的6个优点 1.契合W3C规范标准.这确保您的网