因为被派去协助别的组,有机会写了一下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. jenkins+git+maven搭建自动化部署项目环境

    简介    折腾了两个晚上,趁着今晚比较有空,把jenkins+git+maven搭建自动化部署项目环境搭建的过程记录一下,这里我把github作为git的远程仓库(https://github.co ...

  2. API -- java.lang.Integer

    java.lang Class Integer static Integer valueOf(int i) Returns an Integer instance representing the s ...

  3. JSON数据源提供多值参数的实现

    一.应用场景 (1)报表的数据内容需要根据某个参数进行过滤. (2)该参数是一个多值参数,即从一个下拉列表中选择一个或多个项目. (3)报表需要自动运行,因此参数必须有默认值. (4)参数默认值无法在 ...

  4. url的内容及格式

    url的内容及结构: url格式:

  5. php 保存到mysql数据库中的中文乱码

    近期又php项目,乱码是个头痛的问题 解决方法: 1,php 文件中 添加 header(“Content-Type: text/html; charset=utf-8"); 2,需要做数据 ...

  6. 解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

    前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...

  7. SAP播放本地视频及音频(仅限于window MediaPlayer可播放文件)

    这个是从SCN上看到的,自己稍加修改,编制,做的还可以,可以播放视频,音频,唯一的不足就是不能控制播放视频的显示窗口大小,希望有人能帮忙解决,感激! 视频播放类:(新建类Z_CL_MEDIA,点击基于 ...

  8. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

  9. 关于博弈论中的一硬币正反问题的分析<二>

    昨天分析了一下硬币正反的问题,其中说到一点是求美女收益期望E(女)=-8xy+3y+3x-1 最大化,当然结果我们是说的一个范围内的变化以及可以针对性的调整.这里再次说明一下,不是简单的求二元函数的最 ...

  10. Java中sql语句的引号问题

    1..sql语句 在数据库中,当我们查询语句时,会使用类似的语句: Select * from userinfo where userid='1' or 1; Select * from userin ...