关于css的新思考
因为被派去协助别的组,有机会写了一下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的新思考的更多相关文章
- webpack4 单独抽离打包 css 的新实现
webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...
- 关于CSS reset的思考
关于CSS reset的思考 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div ...
- Memcache架构新思考
2011年初Marc Kwiatkowski通过Memecache@Facebook介绍了Facebook的Memcache架构,现在重新审视这个架构,仍有很多方面在业界保持先进性.作为weibo内部 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- CSS的一些思考(一)
迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个 ...
- css 3 新特性
CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...
- 常见标签的默认属性值及相互作用——关于CSS reset的思考
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...
- CSS组件化思考
为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...
- CSS中新属性calc()
CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...
随机推荐
- angular中动态添加的元素绑定事件问题
$compile http://segmentfault.com/q/1010000000726448/a-1020000000727088 接口下载问题
- mac 安装php7
卸载php55 brew unlink php55 brew install homebrew/php/php70 安装成功信息 To enable PHP in Apache add the fol ...
- neatbean 8+版本 配置
//更改代码行距 打开C:\Users\{yourname}\AppData\Roaming\NetBeans\7.3.1\config\Editors\Preferences,用文本编辑器打开 or ...
- 解决ora-00054 Oracle锁表问题
1.运行sql: select session_id from v$locked_object; 查出锁表的session,可能很多,正常是没有的 2.SELECT sid, serial#, u ...
- InventSumDelta表的作用
https://groups.google.com/forum/#!topic/microsoft.public.axapta.programming/rRfbJo9M0dk The purpose ...
- lua实现私有函数
本文是原创文章,如需转载,请注明文章出处 要用lua实现私有函数,关键就是使用metatable的特性来实现. Test.lua: local v = {};v.x = 100;v.y = 200; ...
- JAVA中的正则表达式
正则表达式:是字符串内容的匹配模板 正则表达式本身就是一个字符串 正则表达式的模糊符号: 一个[ ]代表一个字符,括号里面表示可以选择那些字符 { }用来表示前面这个正则表达式出现的次数 ?+* 这三 ...
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'
1.查看一下mysql的状态 systemctl status mariadb 2.启动mysql systemctl start mariadb
- UIDatePicker和UIToolbar的使用
功能,用UIDatePicker 和UIToolbar 实现点击文本框弹出日期选择空间. 点击确定按钮获取时间显示到对应的Text Field里面,点击取消按钮隐藏键盘. 1.创建textField控 ...
- CentOS7.1下JDK+Tomcat应用环境搭建
最近由于项目的原因,需要测试Linux环境下的应用部署情况.选用了CentOS7.1版本+JDK1.6版本+Tomcat7.0版本进行搭建.其间各种折磨就不说了,随手把相关的注意事项和大概的步骤记录下 ...