搭建私人css开发流程环境

前言

前段时间一直咸鱼直到毕设答辩完,关于毕设之前也扯了几篇文章,这个月就不水了,打算梳理一个新的命题就是如何将css整理出一套工作流程与开发规范。

正文

这个命题是很早之前就有的想法,主要是因为自己开发的时候,写css总会遇到一些奇怪的问题,或者在开发前期没有设计稿,想要迅速生成能看的可视化界面。或者是一些常用组件的写法,不常见属性的用法需要做一些积累。 综上所述,看上去很多没有联系的问题其实一直贯穿于前端开发的整个流程中,因为没有刻意去给自己定下规范,导致不同项目的css写法可能就不一致。 现在就是将平时想要的注意的点和流程都一起梳理一下,在开发的时候能够即时找到并应用。

开发之前

规范

每个项目开始之前都需要遵循一定的规范。

当然使用ide编辑器我们可以将格式化这种东西省去。

一般命名都是按照个人习惯,可以采用BEM命名规则,也可以用自己习惯的规则来命名。这个最重要的就是让别人能够一眼看出是对哪块内容增加的样式。

当然在一些框架中可以采用scss。

或者配合CSS Modules来防止命名冲突。

素材

我们常常需要做一些中小型项目,它是没有设计稿的,因此我们在需求讨论之后需要快速搭建出静态页面(或许还有部分交互)。光是靠bootstrap这类css库是无法搞定的。

我们需要在平时就积累一些页面的素材。

在不是很重视交互,只需要快速给出类似几个按钮就解决的页面中,可以使用 ant desgin 快速搭建页面。

如果需要一些创造性的交互,那么肯定需要在开发之前有一些积累,比如平时多看国外一些设计网站

dribbble.com www.behance.net

然后通过一些工具来保存,比如inboard

imgn

工具

常用的一些css 网站肯定要有个组织备用。

  1. caniuse.com 用于查询css某些特性的兼容状态。
  2. design.google.com 移动端设备查询表
  3. css3 animate 一些常规的css动画列表。
  4. 缓动函数查询
  5. css兼容性原理查询

开发阶段

开发时要注意的一些问题就是如何快速的写出符合要求的css样式。 比如三栏布局,各种嵌套的布局,tootip效果,纯css的一些图形效果。

普通情况下基本上简单地样式都能组合出来。比较复杂的一些内容,如果没有思路,那么就可以用codepen.io 通过搜关键词查类似的样式如何写。比如 自定义button的写法。

当然codepen也适用于前期素材的搜集。

更重要的是平时对css代码片段的搜集。 代码片段搜集有几种方式,一种是通过工具,比如lepton(通过github保存代码片段)。 imgn

一种是本地搭建wiki,做个css分类,这个的好处在于你可以积累各种各样的内容,而且能引入类似jsfiddle的demo。 imgn

或者利用一些框架的ui库组织工具,比如react-styleguidistimgn

开发阶段的很多内容其实就是看平时积累,项目越做越多,自己的代码库就积累的越多,开发时候效率就越快。

移动端

移动端我们经常是通过chrome模拟设备测试,但是实际情况还是会有些不同。 为了开发方便我们可以利用spy-debugger,它可以远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。

结尾

简单的先搭建了流程框架,细节部分等工作后慢慢积累再放出~

Table of Contents