基于组件的样式的未来,Highcharts翻译系列之十九
分类:前端技术

JavaScript 中的 CSS:基于组件的体制的前景

2017/12/03 · CSS · 体制组件

本文由 伯乐在线 - dimple11 翻译,刘唱 校稿。未经许可,禁绝转发!
斯洛伐克共和国(The Slovak Republic卡塔尔语出处:Jonathan Z. White。招待插足翻译组。

 

图片 1

 

 

 

 

 

 

 

 

 

大家通过运用内联式 CSS 样式,能够获取 Javascript 中有着编制程序援救,它的裨益就像 CSS 预微型机(变量、混入和函数卡塔尔相似,並且也能缓和 CSS 中的超多难题,譬喻全局命名空间和体裁冲突。

为了深刻切磋 Javascript 中写 CSS 解决的难题,能够看那些有名的演示:ReactJS中引入CSS。关于 Aphrodite 上的习性修改楷模,你能够在Khan Academy: Aphrodite 上查到内联式 CSS 代码,若是想学学更加多Javascript 中 CSS 最棒试行的有关文化,能够查阅 Airbnb 的体裁指南。

别的,大家使用内联式 Javascript 样式来树立组件,处理小编前少年老成篇作品中介绍的部分布署基本原理:在您能左右设计在此以前,必须先精晓设计的基本原理。

三个启迪式的例证

咱们从叁个轻便易行的例证入手:缔造和安顿贰个按键。

常常,组件 Button 和其休戚相关的体制 ButtonStyles 会被归入肖似的公文,那是因为它们管理的是同个难点:视图。不过以这一个例子来说,作者是因为八种诬捏要将代码分开,使代码更易被理解。

那个时候是按键组件:

<span style="color: #000000">... function Button(props) { return ( <input type="button" className={css(styles.button)} value={props.text} /> ); }</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">...
function Button(props) {
  return (
    <input
      type="button"
      className={css(styles.button)}
      value={props.text}
    />
  );
}</span>

这边没什么非常的——正是一个无状态 React 组件。Aphrodite 发挥效用的地点是在 className 属性这里。函数 css 的效果与利益是引入了多少个styles 对象,并将其转移为 css。styles 对象是透过 Aphrodite 的 StyleSheet.create({ … }) 语句所生成,你能够由此 Aphrodite playground 查看 StyleSheet.create({ … }) 的输出结果。

那儿是按钮的样式表:

CSS

<span style="color: #000000">... const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'; const styles = StyleSheet.create({ button: { background: gradient, borderRadius: '3px', border: 0, color: 'white', height: '48px', textTransform: 'uppercase', padding: '0 25px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">...
const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)';
const styles = StyleSheet.create({
  button: {
    background: gradient,
    borderRadius: '3px',
    border: 0,
    color: 'white',
    height: '48px',
    textTransform: 'uppercase',
    padding: '0 25px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
});</span>

 

Aphrodite 的好处之一是搬迁轻易直接,并且学习曲线低缓。像 border-radius 这种性格改为了borderRadius,值产生了字符串。伪类接纳器、媒体询问和字体定义都以可完成的,别的,会自动抬高浏览器引擎前缀。

以下是结果:

图片 2

 

 

 

 

 

 

 

 

切记那几个事例,我们来探视怎么样使用 Aphrodite 来建设构造壹此中央的可视化设计系统,大家重视于以下基本设计准绳:制版和间距。

基本法规1——制版

笔者们从排版入手,它是设计的基本点根基。第一步是概念排版常量,与 Sass 和 Less 差异,Aphrodite 中常量可以放在 Javascript 或 JSON 文件中。

概念制版常量

在创制常量时,给变量起名要语义化。譬喻说,不要给当中的字号起名 h2,而应起像 displayLarge 这种能够描述其职能的名字。形似的,设置字体粗细时,不要给当中的粗细值起名 600,而应起像半粗体那样的名字,方便描述其效果。

CSS

<span style="color: #000000">export const fontSize = { // heading displayLarge: '32px', displayMedium: '26px', displaySmall: '20px', heading: '18px', subheading: '16px', // body body: '17px', caption: '15px', }; export const fontWeight = { bold: 700, semibold: 600, normal: 400, light: 200, }; export const tagMapping = { h1: 'displayLarge', h2: 'displayMedium', h3: 'displaySmall', h4: 'heading', h5: 'subheading', }; export const lineHeight = { // heading displayLarge: '48px', displayMedium: '48px', displaySmall: '24px', heading: '24px', subheading: '24px', // body body: '24px', caption: '24px', };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<span style="color: #000000">export const fontSize = {
  // heading
  displayLarge: '32px',
  displayMedium: '26px',
  displaySmall: '20px',
  heading: '18px',
  subheading: '16px',
 
  // body
  body: '17px',
  caption: '15px',
};
 
export const fontWeight = {
  bold: 700,
  semibold: 600,
  normal: 400,
  light: 200,
};
 
export const tagMapping = {
  h1: 'displayLarge',
  h2: 'displayMedium',
  h3: 'displaySmall',
  h4: 'heading',
  h5: 'subheading',
};
 
export const lineHeight = {
  // heading
  displayLarge: '48px',
  displayMedium: '48px',
  displaySmall: '24px',
  heading: '24px',
  subheading: '24px',
 
  // body
  body: '24px',
  caption: '24px',
};</span>

对诸如字号和行高端变量准确赋值特别关键,因为它们会直接影响设计的垂直规律(vertical ryth),垂直规律能支持达成要素之间的间隔统意气风发。

要询问越多的垂直规律,你能够阅读那篇小说:缘何垂直规律是后生可畏种重视的制版习于旧贯?

图片 3

用总括器鲜明行高

想让行高和字号取值精确,背后大有知识。大家能够运用算数比率来发生黄金年代雨后鞭笋潜在尺寸以作备选。几周前,小编写了风流罗曼蒂克篇详述方法论的文章:制版能够做到或损毁你的统筹:二个门类选拔的历程。你能够动用Modular Scale 来决定字号,使用垂直规律计算器来决定行高。

概念二个标题组件

概念了制版常量之后,下一步是创造三个组件使用其值。以此组件的目的是在代码库中强化标题设计和贯彻的后生可畏致性。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { StyleSheet, css } from 'aphrodite/no-important'; import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography'; function Heading(props) { const { children, tag: Tag } = props; return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>; } export default Heading; export const styles = StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge, fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, displayMedium: { fontSize: fontSize.displayMedium, fontWeight: fontWeight.normal, lineHeight: lineHeight.displayLarge, }, displaySmall: { fontSize: fontSize.displaySmall, fontWeight: fontWeight.bold, lineHeight: lineHeight.displaySmall, }, heading: { fontSize: fontSize.heading, fontWeight: fontWeight.bold, lineHeight: lineHeight.heading, }, subheading: { fontSize: fontSize.subheading, fontWeight: fontWeight.bold, lineHeight: lineHeight.subheading, }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<span style="color: #000000">import React, { PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography';
 
function Heading(props) {
  const { children, tag: Tag } = props;
  return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
}
 
export default Heading;
 
export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  displayMedium: {
    fontSize: fontSize.displayMedium,
    fontWeight: fontWeight.normal,
    lineHeight: lineHeight.displayLarge,
  },
  displaySmall: {
    fontSize: fontSize.displaySmall,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displaySmall,
  },
  heading: {
    fontSize: fontSize.heading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.heading,
  },
  subheading: {
    fontSize: fontSize.subheading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.subheading,
  },
});</span>

 

Heading 是无状态的函数式组件,它引进一个标签作为品质,并赶回该标签相应的体制。因为我们在此之前已在常量文件中定义了标签映射,所以这么是有理的。

<span style="color: #000000">... export const tagMapping = { h1: 'displayLarge', h2: 'displayMedium', h3: 'displaySmall', h4: 'heading', h5: 'subheading', };</span>

1
2
3
4
5
6
7
8
<span style="color: #000000">...
export const tagMapping = {
  h1: 'displayLarge',
  h2: 'displayMedium',
  h3: 'displaySmall',
  h4: 'heading',
  h5: 'subheading',
};</span>

咱俩在组件文件的尾部定义styles对象,就在这里地会用到制版常量。

<span style="color: #000000">export const styles = StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge, fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, ... });</span>

1
2
3
4
5
6
7
8
9
<span style="color: #000000">export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  
  ...
});</span>

那正是题目组件的施用办法:

<span style="color: #000000">function Parent() { return ( <Heading tag="h2">Hello World</Heading> ); }</span>

1
2
3
4
5
<span style="color: #000000">function Parent() {
  return (
    <Heading tag="h2">Hello World</Heading>
  );
}</span>

使用这种方法,能够收缩设计系统中冒出的不测变动。通过毁灭对全局样式的急需,甚至对代码库标题典型化,能够使大家防止各类差异字号的麻烦。别的,大家用来树立标题组件的措施也可用以在代码主体组建文本组件。

基本法规2——间距

间隔能够同有时控规划中的垂直和等级次序规律,那使得间距对于树立三个可视化设计系统首要性。和制版部分切合,管理间距的首先步就是概念间距常量。

概念间距常量

概念成分间隔开分离常量时,大家得以采用风度翩翩种算数方法。通过使用 spacingFactor 常量可以发生大器晚成多元基于叁个公因数的长度,这种艺术能够确定保障成分间的间隔具备逻辑性和意气风发致性。

<span style="color: #000000">const spacingFactor = 8; export const spacing = { space0: `${spacingFactor / 2}px`, // 4 space1: `${spacingFactor}px`, // 8 space2: `${spacingFactor * 2}px`, // 16 space3: `${spacingFactor * 3}px`, // 24 space4: `${spacingFactor * 4}px`, // 32 space5: `${spacingFactor * 5}px`, // 40 space6: `${spacingFactor * 6}px`, // 48 space8: `${spacingFactor * 8}px`, // 64 space9: `${spacingFactor * 9}px`, // 72 space13: `${spacingFactor * 13}px`, // 104 };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${spacingFactor / 2}px`,  // 4
  space1: `${spacingFactor}px`,      // 8
  space2: `${spacingFactor * 2}px`,  // 16
  space3: `${spacingFactor * 3}px`,  // 24
  space4: `${spacingFactor * 4}px`,  // 32
  space5: `${spacingFactor * 5}px`,  // 40
  space6: `${spacingFactor * 6}px`,  // 48
 
  space8: `${spacingFactor * 8}px`,  // 64
  space9: `${spacingFactor * 9}px`,  // 72
  space13: `${spacingFactor * 13}px`, // 104
};</span>

上边的例子用了三个从生机勃勃到十一的线性刻度,不过用不一样的刻度和比重做尝试。设计当中因为用场、受众以至目的设备的不及而须求差异的刻度。以下为例,那是值为 8 的 spacingFactor 用黄金比例算出来的前八个长度

<span style="color: #000000">Golden Ratio (1:1.618) 8.0 x (1.618 ^ 0) = 8.000 8.0 x (1.618 ^ 1) = 12.94 8.0 x (1.618 ^ 2) = 20.94 8.0 x (1.618 ^ 3) = 33.89 8.0 x (1.618 ^ 4) = 54.82 8.0 x (1.618 ^ 5) = 88.71</span>

1
2
3
4
5
6
7
<span style="color: #000000">Golden Ratio (1:1.618)
8.0 x (1.618 ^ 0) = 8.000
8.0 x (1.618 ^ 1) = 12.94
8.0 x (1.618 ^ 2) = 20.94
8.0 x (1.618 ^ 3) = 33.89
8.0 x (1.618 ^ 4) = 54.82
8.0 x (1.618 ^ 5) = 88.71</span>

那便是间隔刻度在代码中显得的样本,笔者加了二个增加帮衬函数,把计算结果管理成最周边的子弹头像素。

<span style="color: #000000">const spacingFactor = 8; export const spacing = { space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 8 space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 13 space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 21 space3: `${computeGoldenRatio(spacingFactor, 3)}px`, // 34 space4: `${computeGoldenRatio(spacingFactor, 4)}px`, // 55 space5: `${computeGoldenRatio(spacingFactor, 5)}px`, // 89 }; function computeGoldenRatio(spacingFactor, exp) { return Math.round(spacingFactor * Math.pow(1.618, exp)); }</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
  space1: `${computeGoldenRatio(spacingFactor, 1)}px`,  // 13
  space2: `${computeGoldenRatio(spacingFactor, 2)}px`,  // 21
  space3: `${computeGoldenRatio(spacingFactor, 3)}px`,  // 34
  space4: `${computeGoldenRatio(spacingFactor, 4)}px`,  // 55
  space5: `${computeGoldenRatio(spacingFactor, 5)}px`,  // 89
};
 
function computeGoldenRatio(spacingFactor, exp) {
  return Math.round(spacingFactor * Math.pow(1.618, exp));
}</span>

概念了区间常量之后,大家就可以用它给规划中的成分加外边距。生龙活虎种情势就是在组件中引进距离常量并使用它们。

举例,大家在 Button 组件中投入 marginBottom。

<span style="color: #000000">import { spacing } from '../styles/base/spacing'; ... const styles = StyleSheet.create({ button: { marginBottom: spacing.space4, // adding margin using spacing constant ... }, });</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">import { spacing } from '../styles/base/spacing';
 
...
 
const styles = StyleSheet.create({
  button: {
    marginBottom: spacing.space4, // adding margin using spacing constant
    ...
  },
});</span>

那在大好些个气象下都管用,但是如若大家想依据按键放置的职位去改动它的 marginBottom 属性值,该如何是好吧?

黄金年代种完成三种外边距的秘诀是从父组件覆盖外边距样式,此外朝气蓬勃种艺术是创立一个Spacing 组件来决定成分的垂直外边距。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { spacing } from '../../base/spacing'; function getSpacingSize(size) { return `space${size}`; } function Spacing(props) { return ( <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}> {props.children} </div> ); } export default Spacing;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span style="color: #000000">import React, { PropTypes } from 'react';
import { spacing } from '../../base/spacing';
 
function getSpacingSize(size) {
  return `space${size}`;
}
 
function Spacing(props) {
  return (
    <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}>
      {props.children}
    </div>
  );
}
 
export default Spacing;</span>

由此这种情势,大家得以将安装异乡距的职分从子组件中分离出来,转而放入父组件中实行。那样的话,子组件布局就心中无数了,没有供给知道子组件本身与此外因素之间的岗位关系。

那很有用,因为一些像按键、输入和卡牌之类的机件只怕须要多种外边距。举个例子说,二个报表中的开关也许比八个导航栏中的按键必要更大的各市距。极其告诫一点,若是三个零部件的异域距总是同样的,那么在组件内部处理理外边距会更客观。

何况你也说不许早已注意到了例子中仅用了 marginBottom,那是因为在三个倾向上定义全数的垂直外边距,能够幸免外边距碰撞,况且帮您立时跟进了然规划的垂直规律。你能够在哈利Robert的篇章《单向外省距注明》中看见更加的多那上头的剧情。

末段一点,你也得以将定义的间隔常量用作内边距。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { StyleSheet, css } from 'aphrodite/no-important'; import { spacing } from '../../styles/base/spacing'; function Card(props) { return ( <div className={css(styles.card)}> {props.children} </div> ); } export default Card; export const styles = StyleSheet.create({ card: { padding: spacing.space4}, // using spacing constants as padding background: 'rgba(255, 255, 255, 1.0)', boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)', borderRadius: '3px', }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span style="color: #000000">import React, { PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import { spacing } from '../../styles/base/spacing';
 
function Card(props) {
  return (
    <div className={css(styles.card)}>
      {props.children}
    </div>
  );
}
 
export default Card;
 
export const styles = StyleSheet.create({
  card: {
    padding: spacing.space4}, // using spacing constants as padding
    
    background: 'rgba(255, 255, 255, 1.0)',
    boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)',
    borderRadius: '3px',
  },
});</span>

经过对左左侧距使用同后生可畏的间隔常量,你便能够使和睦的宏图更有着视觉上的风流浪漫致性。

这是结果也许现身的标准:

图片 4

 

 

 

 

 

 

 

既然如此您对 Javascript 中的 CSS 有自然调整,那就去探究,尝试将内联式 Javascript 样式归入你的下五个体系。假设能够在单生机勃勃的蒙受下拍卖全数的体裁和视图,我想你会对此拾分谢谢。

本着 CSS 和 Javascript,有怎么样令你认为震动的新进展呢?小编个人因为 async/await 而感到到欢乐不已,你可以留言或在 推特(TWTR.US) 上给自己发 tweet。

您能够因此 Medium 找到笔者,小编每一周都会发文章,恐怕关怀作者的 推特(Twitter),作者总在上边对规划、前端开荒以至设想现实高谈大论。

附记:要是您心爱那篇随笔,那么点击

本文由pc28.am发布于前端技术,转载请注明出处:基于组件的样式的未来,Highcharts翻译系列之十九

上一篇:奇幻属性,的好友关系 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 遇见未知的,web开采连忙入门
    遇见未知的,web开采连忙入门
    CSS 框架 Bulma 教程 2017/10/26 · CSS ·Bulma 原文出处:阮一峰    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS框架,
  • 追踪客户,读书笔记
    追踪客户,读书笔记
    使用 CSS 追踪用户 2018/01/20 · CSS · 1评论 ·追踪 原文出处:jbtronics   译文出处:枫上雾棋    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行
  • pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    CSS技巧:逐帧动漫抖动实施方案 2017/08/16 · CSS ·动画 原来的书文出处:坑坑洼洼实验室    我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而
  • 跟随我在oracle学习php,HTML中form表单的用法
    跟随我在oracle学习php,HTML中form表单的用法
    表单元素之搭车系 2016/01/28 · HTML5 ·表单 原文出处:司徒正美(@司徒正美)    对于表单元素, 除了reset元素,只要有name与value都能提交 因为在我们印象
  • Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编制程序初读书人新添HTML和CSS两门学科 2012/04/03 · CSS · 来源:伯乐在线     ·CSS 葡萄牙语原来的文章:Mashable  编译:伯乐在线– 黄利民 乐