因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的)。因为看了demo的代码以及对于jsx语法的不熟悉,所以一时不知所措把css写在哪里才发现react对于css的处理已经不同于原来传统对于css的定义了,参考这篇文章

react很核心的思想就是:1. 数据和ui分层;2. 组件化;第二点其实也是建立在第一点之上的,在后台系统中的运用简直太合适了,跟我当时在考拉的时候想做的是差不多,但是react的组件用起来真的太方便,直接把数据props传进去component就可以直接展示了。然而有点跑题,写这篇文章主要是想说对css观念的冲击给我带来的冲击,传统的css发展了这么多年,在每个阶段有开发者为他提供开发工具比如sass、less之类的简化当时的流程。然而css本身是有一些缺点比如css是一个很全局的东西,命名空间都需要自己加(所以才有了sass&less类的“编程语言”),而且很多情况下并不能复用,我也一直觉得很多时候都想写inline style,然而为了可维护性都尽量写在了css文件中。

然而爆栈网的上文中把style的作用归类为了 1. Layout; 2. Appearance;3. Behavior & state;其中Layout是不适合作为inline-style去写的,而后面的Appearance是最方便写inline style的,而第三个因为state变化的(比如hover、activate状态的)引起的样式变化,因为react本身就有状态的管理所以很自然的就可以用inline style来处理。这给人感觉就是真的从一件事情的本质去思考为什么有了现有的问题及解决方案的,包括react这个框架的出现也是一样。

有机会真的应该看看react和jsx、css的几个conf,真的会拓宽很多思路,包括今天在stackexchange上看到的puzzle也很有趣,相比掌盟上毫无意义的评论,reddit上对于s6的评价要精彩的多。这几天对代码工程化的思考和看了《松本行弘的程序世界》中关于软件开发的原则的总结,很大程度上都归结于DRY(dont repeat yourself)而这很大是靠封装和多态性,暂时是比较认同。又一次发现要把自己的视野再放大一点啊。。。

关于css的新思考的更多相关文章

  1. webpack4 单独抽离打包 css 的新实现

    webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...

  2. 关于CSS reset的思考

    关于CSS reset的思考 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div ...

  3. Memcache架构新思考

    2011年初Marc Kwiatkowski通过Memecache@Facebook介绍了Facebook的Memcache架构,现在重新审视这个架构,仍有很多方面在业界保持先进性.作为weibo内部 ...

  4. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  5. CSS的一些思考(一)

    迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个 ...

  6. css 3 新特性

    CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...

  7. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  8. CSS组件化思考

    为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...

  9. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

随机推荐

  1. MyEclipse 不能编译Java类到Classes文件夹

    设置Java Build Path -> Resource -> Default output folder 到一个新的文件夹XXXproject/WebContent/WEB-INF/c ...

  2. select下拉框插件(转)

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. sqlite字段属性删除方法

    Sqlite 不支持直接修改字段的名称. 我们可以使用别的方法来实现修改字段名. 1.修改原表的名称 ALTER TABLE table RENAME TO tableOld; 2.新建修改字段后的表 ...

  4. aliyun source.list

    电信的网络越来越不靠普.ubuntu环境使用下面的source.list deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted un ...

  5. 网页中多媒体对像标记<OBJECT>和<EMBED>

    在网页中常用object和embed标记插入的多媒体对象,比如FLASH,视频等. 用一个快播例子说明下这两个标记的使用和区别: <object classid="clsid:F3D0 ...

  6. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  7. ajax无刷新删除、复制 THINKPHP

    一.jquery 代码: <SCRIPT LANGUAGE=javascript> function delGoods(goodsID) {      if(confirm( " ...

  8. Node.js的cluster模块——Web后端多进程服务

    众所周知,Node.js是单线程的,一个单独的Node.js进程无法充分利用多核.Node.js从v0.6.0开始,新增cluster模块,让Node.js开发Web服务时,很方便的做到充分利用多核机 ...

  9. Web导出EXCEL

    前台(客户端)导出EXCEL: 单纯的JS能够导出Excel的,一般都需要调用客户端所安装的Office Excel组件(COM接口)来完成这个工作. http://www.stepday.com/t ...

  10. mysql 查询当天、本周,本月,上一个月的数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 近7天 DAY) <= date(时间字段名) 近30天 DAY) & ...