polished css,CSS in JS
在之前的网站有一个开发原则是‘关注点分离’,这个技术的意思是,各个技术都只是负责自己的领域,不会混合在一起,形成耦合,而对于前端的开发来说,就是JavaScript、HTML、CSS的解耦。
关注点分离
对于前端开发人员,这三个概念并不陌生,那我们最后澄清一下他们各自担任的角色。
HTML语言:负责网页的构建任务,又被称为语义层
-CSS语言:负责网页的样式。又被称为视觉层
JavaScript语言:负责网页的逻辑与交互,又被称为逻辑层和交互层
也就是说不要写内部样式和行内脚本。
但是在React出现之后,这个原则就不再适用了,React是组件结构,强制的把JavaScript、HTML、CSS写在了一起。那我们下面看一下关于React的代码
const style = {
'color': 'red',
'fontSize': '46px'
};
const clickHandler = () => alert('hi');
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
上面的一段代码包含了JavaScript、HTML、CSS的代码,一个文件中中封装了结构、样式、逻辑,完全违背了‘关注点分离’的原则。
但是这么写,有助于组件的隔离,每一个组件都包含了要用到的所有的代码,不用依赖于外部,组件和组件之间不存在耦合关系,很方便被复用,所以我们要是使用React的话,这样的写法会渐渐的称为主流的写法。
组件的封装
我们如果简单的从结构上面看,React写法好像是将JavaScript、HTML、CSS混合的写到了一起。但是实际上并不是这样的,其实实现的方式是用JavaScript来写HTML、CSS。React在JavaScript里面实现了对HTML和CSS的封装,我们是通过封装来操作HTML和CSS,也就是网页的结构、样式、逻辑都是通过JavaScript来实现的。
其中react对HTML的封装是JSX语言,ReactJs基础语法有进行详细的讲述,那么我们看一下啊我们是怎么实现对CSS的封装的,对于React来说,对CSS的封装,就是沿用了DOM的style的属性。
const style = {
'color': 'red',
'fontSize': '46px'
};
在上面的代码中CSS的font-size属性要写成fontsize,这是JavaScript操作CSS属性的约定,这个约定在链接里面可以详细看到。
由于CSS的封装非常弱,所以导致网上出现了一些列的第三方的库,用来加强React的CSS的操作,这些第三方的库被统称为CSS in JS,表达的意思就是用JavaScript来写CSS。现在在网上流传的CSS in JS就有47种。
有很多人会问这些库和‘CSS预处理器’(sass,less)有什么区别呢?
答案:CSS in JS使用的是JavaScript的语法,是JavaScript脚本的一部分,不需要从头学习一套专有的API,不需要再进行一次编译步骤。
那我们现在看一个CSS in JS库,叫做 polished.js,这个库将一些常见的CSS属性封装成函数,用起来比较方便,充分的体现了JavaScript 语言写CSS 的优势。
首先先进行加载polished.js。
const polished = require('polished');
//如果是浏览器我们可以插入下面的脚本
polished.js目前有50多个方法,比如clearfix方法用来清理浮动。
const styles = {
...polished.clearFix(),
};
上面代码中,clearFix就是一个普通的JavaScript 函数,返回一个对象。
polished.clearFix()
// 返回值
// {
// &::after: {
// clear: "both",
// content: "",
// display: "table"
// }
// }
现在我们look几个简单实用的函数。
ellipsis将超过指定长度的文本,使用省略号替代
const styles = {
...polished.ellipsis('200px')
}
// 返回值
// {
// 'display': 'inline-block',
// 'max-width': '250px',
// 'overflow': 'hidden',
// 'text-overflow': 'ellipsis',
// 'white-space': 'nowrap',
// 'word-wrap': 'normal'
// }
hideText用于隐藏文本,显示图片。
const styles = {
'background-image': 'url(logo.png)',
...polished.hideText(),
};
// 返回值
// {
// 'background-image': 'url(logo.png)',
// 'text-indent': '101%',
// 'overflow': 'hidden',
// 'white-space': 'nowrap',
//}
hiDPI指定高分屏样式。
const styles = {
[polished.hiDPI(1.5)]: {
width: '200px',
}
};
// 返回值
//'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min--moz-device-pixel-ratio: 1.5),
// only screen and (-o-min-device-pixel-ratio: 1.5/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
// 'width': '200px',
//}
retinaImage为高分屏和低分屏设置不同的背景图。
const styles = {
...polished.retinaImage('my-img')
};
// 返回值
// backgroundImage: 'url(my-img.png)',
// '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
// only screen and (min--moz-device-pixel-ratio: 1.3),
// only screen and (-o-min-device-pixel-ratio: 1.3/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
// backgroundImage: 'url(my-img_2x.png)',
// }
polished.js[用法](https://polished.js.org/docs/)主要提供的其他方法如下:
normalize():样式表初始化
placeholder():对 placeholder 伪元素设置样式
selection():对 selection 伪元素设置样式
darken():调节颜色深浅
lighten():调节颜色深浅
desaturate():降低颜色的饱和度
saturate():增加颜色的饱和度
opacify():调节透明度
complement():返回互补色
grayscale():将一个颜色转为灰度
rgb():指定红、绿、蓝三个值,返回一个颜色
rgba():指定红、绿、蓝和透明度四个值,返回一个颜色
hsl():指定色调、饱和度和亮度三个值,返回一个颜色
hsla():指定色调、饱和度、亮度和透明度三个值,返回一个颜色
mix():混合两种颜色
em():将像素转为 em
rem():将像素转为 rem
polished.js还有一个特色:所有函数默认都是柯里化的,因此可以进行函数组合运算,定制出自己想要的函数
import { compose } from 'ramda';
import { lighten, desaturate } from 'polished';
const tone = compose(lighten(10), desaturate(10))
polished css,CSS in JS相关推荐
- [JS,CSS] - CSS圆角框组件
来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...
- 【译】CSS动画 vs JS动画
原文地址 目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
- node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
- 客户端页面不更新CSS样式或JS脚本的方法 (2018-08-17 17:33)
js或css后加?v= 版本号的用法 <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?v ...
- [JavaWeb-Bootstrap]CSS样式和JS插件
CSS样式和JS插件 1. 全局CSS样式:* 按钮:class="btn btn-default"* 图片:* class="img-responsive": ...
- [css] css的加载会阻塞js运行吗?为什么?
[css] css的加载会阻塞js运行吗?为什么? 会阻塞js的执行,因为js可能会去获取或改变元素的样式,所以浏览为了不重复渲染, 等所有的css加载渲染完成后在执行js 个人简介 我是歌谣,欢迎和 ...
- 300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
- css框架和js框架_优雅设计的顶级CSS框架
css框架和js框架 Brief discussion: 简要讨论: Well, who doesn't want their website or web page to look attracti ...
- CSS中调用JS函数和变量
在CSS来调用JS程序. 这个技术是网络安全里的,叫做CSS跨站. 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript: ...
最新文章
- jQuery中blur和focus事件的应用
- GOF23种设计模式(Design Pattern)总结
- 最全解释P2P、P2C 、O2O 、B2C、B2B、 C2C的定义
- 朴素Paxos(Basic Paxos)算法java简易实现
- Quick BI助力云上大数据分析---深圳云栖大会 1
- Design Compiler指南——预综合过程
- 今天的几点感悟_20160429
- 2019-4-21 - plan
- Flume的开发之 自定义 source 自定义 sink 自定义拦截器
- 计算机学数字电子基础知识,什么是数字电路?新手如何快速学习数字电路基础?...
- 最适合使用外汇跟单软件的人
- 关于在Onenote online导出笔记的笔记
- ContextCapture | 无人机倾斜摄影技术在农村不动产确权中的应用
- python打开读取文件内容
- system32下 exe文件作用
- 利用Python+云服务器+邮箱实现的个人待办事项提醒
- 企业微信获取企业凭证全流程
- Java源码:Reference与ReferenceQueue
- [Oracle] 书写历史的甲骨文――ORACLE公司传奇
- 110款表白网站源码,搭建表白网站必备,总有一款适合你