如何能提高 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 最新技术, 从企业招聘人才需求 到怎么学习前端开发, 和学习什么内容都有免费系统分享. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入
来源: http://www.jianshu.com/p/938fad1d0498