关于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( ...
随机推荐
- GoF--外观设计模式
设计模式--外观模式Facade(结构型): 1. 概述 外观模式,我们通过外观的包装,使应用程序只能看到外观对象,而不会看到具体的细节对象,这样无疑会降低应用程序的复杂度,并且提高了程序的可维护性. ...
- django学习记录--第一个网页“hello django”
一.安装django 下面两种方法任选其一 1.pip或easy_install 安装 pip install django easy_install django 2.到django官网(https ...
- 内存分配与Segmentation fault
为了方便使用,我做了如下结构体的嵌套使用: struct operation{ int num; char name[100]; char owner[100]; char msg[100];}; s ...
- beat your own python env
1,进入根目录,修改.bashrc,增加一个PATH目录 例如:alias cjtf='export PATH=/home/www/xxx/python_env:$PATH' 如果个人的机器的就不用a ...
- 开发一个简单的python计算器
要求: 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4* ...
- 关于MySql has gone away问题的解决
everybody 是否导入数据库的时候 导的导的 就会出现这个错误呢,这个错误的原因是你的数据库有点大,数据有点多,导入时间过长与服务器失去连接了,让我们看下咋解决把. 如果用的是xampp 修改m ...
- UI UIBUTTON
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- 搭建Hadoop2.5.2+Eclipse开发调试环境
一.简介 为了开发调试方便,本文介绍在Eclipse下搭建开发环境,连接和提交任务到Hadoop集群. 二.安装前准备: 1)Eclipse:Luna 4.4.1 2)eclipse插件:hadoop ...
- Hammer.js
一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...
- [转载]Python 元组、列表、字典、文件
python的元组.列表.字典数据类型是很python(there python is a adjective)的数据结构.这些结构都是经过足够优化后的,所以如果使用好的话,在某些area会有很大的益 ...