CSS萌新不知道的5件事

你可以学任何东西,但是你学不了所有 ? 接受这个事实,专注一门自己最在乎的。 — Una Kravets ??‍? (@Una) September 1, 2017

Una Kravets 是绝对正确. 在现代的CSS开发中,我们还有很多的东西要学,对于刚开始的同学总是不知道从里开始。

这里我列举一些我后悔开始前端之前不知道的一些技巧。

1. 别低估或者看不起CSS

它看起来简单,跟着规则走就行,根据属性给值就可以了。

CSS 是这样, 但是它远不止这些!

一个成功的CSS项目需要最完美的构建。写得不好的CSS是脆弱的,很快就变得难以维护。关键是要学会如何组织代码,以便创建具有长期可用性的可维护结构。

但即使是优秀的代码库,也必须处理疯狂的设备数量、屏幕大小、功能和用户偏好。 更别提还有可达性,国际化,和浏览器的兼容性!

CSS 就像一直小熊: 可爱无害的,但是随着年龄的增长,他会活吃了你。

  • 学着先读代码再写代码。
  • 了解最新的最佳实践,这是你的责任。 MDN, W3C, A List Apart, 和 CSS-Tricks 是你真理的源泉.
  • 页面没有形状; 每种设备是不一样。拥抱多样性,了解不同的环境。

2. 分享与参与

分享真的非常的重要,我多么希望当我刚开始进入这一行的时候有人跟我分享,我用了10年的时间去了解分享的价值; 当我做到的时候, 它完全改变了我对我工作的态度和与他人的合作的方式。

跟着优秀的程序员一起你也会变的优秀, 参与一些开源的项目当中。CSS社区会有很多慷慨的开发者。越快加入越好。

分享你学的一切,成长的路径和最后的结果一样的重要; 即使是很小的技巧也可以让别人受益。

  • 学习 Git。 Git就是开源世界的语言 你肯定想成为它的一部分
  • 参与到一个开源的项目中.
  • 分享! 写博客, 文档, 或者 tweets; 在聚会或者会议上发言。
  • 找到一个责任心强的好基友, 一个会让你经常分享的人。

3. 选择正确的工具

你的代码编辑器应该是你心灵的延伸。

不论你用 Atom, VSCode 或者是老古董 Vim; 越是塑造你思想的工具,越是能让你成为优秀的码农。你不仅会获得速度的提升,而且会有不间断的思想路线,从而产生流畅的想法。

终端是你的朋友。

CSS开发者要远不止写CSS这么简单。构建你的代码, 编译, linting, 格式化, 以及浏览器实时刷新,这些都是你每天要处理的一小部分。

  • 挑选适合自己的IDE。这里有一些搞性能的IED,比如 Vim 或者更容易使用的 Atom or VSCode.
  • 尽快用你自己的方式在终端学习CLI。这篇简短的文章 "Working the command line" 是一个很好的起点。

4. 了解浏览器

浏览器不仅仅只是你的画布, 同样也是一个强大的调试器可以来调试你的代码, 测试性能, 以及向别人学习。

学习浏览器如何渲染你的代码,会让你大开眼界。它可以使你的代码提升一个等级。

每一个浏览器都是不一样的; 去了解它们,接受它们。爱上它们。(是的,也包括IE)

  • 多花时间使用开发者工具审查代码。
  • 你不可能拥有每一种设备; 注册一个 BrowserStack 或者 CrossBrowserTesting 账户, 它值得你拥有。
  • 尽可能安装更多的浏览器,然后检查它们是如何渲染你的代码的。

5. 学习编写可维护的 CSS

它或许会花费你几年的时间,如果CSS开发者只能掌握一个技能,那么应该是编写可维护性的CSS架构。

这意味着你要知道正确的串联,盒子模式,和独特的作品。精通CSS体系结构, 学习他们的优点和缺点以及如何实现它们。

请记住,模块化体系结构好处很多,例如:独立的模块、良好的性能、可访问的结构和响应性组件。(即:幸福地写CSS)。

  • 学会CSS的架构,紧跟着趋势,和 有自己的见解!
  • 下面的人铺平了CSS的道路 Harry Roberts, Una Kravets, Brad Frost, Ben Frain, Sara Soueidan, Chris Coyier, Eric Meyer, Jen Simmons, Rachel Andrew, 还有很多其他人.

前途一片光明

现在的CSS是很棒的。它的前途甚至更好。我享受我编写CSS代码的每一秒。

如果你需要帮助的话可以 联系我 或者这篇文章中提到的CSS开发者。你可能会对这个社区的大方慷慨感到惊讶。

你觉得我的建议怎么样? 你会给出一些怎样的意见呢? 留言让我知道你的想法。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程软文

分布式阿波罗Apollo配置中心

为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

29620
来自专栏python教程

基于django的视频点播网站开发-step9-后台视频管理功能

从本讲开始,我们开始视频管理功能的开发,视频管理包括视频上传、视频列表、视频编辑、视频删除。另外还有视频分类的功能,会一同讲解。这一讲非常重要,因为你将学习到一...

24230
来自专栏娱乐心理测试

mpvue网络接口请求封装

在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

48630
来自专栏编程微刊

js通过input框输入属性和值,改变div的属性

js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

67650
来自专栏KEN DO EVERTHING

快速入门Vue

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

16910
来自专栏码匠的流水账

聊聊flink的Execution Plan Visualization

本文主要研究一下flink的Execution Plan Visualization

14820
来自专栏hotqin888的专栏

用beego vue.js element axios 写flow办公流程——系列五

自己的认识:一定要用独立的前端,即vue.js前端项目必须是独立的,独立的服务,不要放beego里的view里作为tpl页面。虽然,放beego view里的t...

16400
来自专栏进击的全栈

认识Set和Map数据结构

tips : 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致,而entries方法返回的...

17570
来自专栏前端vue

vue-cli3项目创建-配置-发布

(2) 修改user module -- src/store/module/user.js

4.3K40
来自专栏成猿之路

2019开发者调查趋势与方向报告出炉

近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

14840

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励