css in js && js in css #53

MengZhaoFly · 2019-12-24T12:30:06Z

css 发展

link：外联 / @import：导入另一个 css 模块 / 内联：style 标签
css选择器同一优先级的情况下，这几个引入的方式：内联 css > (link 和 @import 后引入的覆盖前引入的)
@Important： 页面加载完才开始渲染，造成页面抖动。
css 预处理器：less / sass
扩展css 的语法，
css 后处理器 postCss
css 届的 babel：

加上浏览器前缀
超前的 css 语法

css 模块化

BEM
css module：
样式复用 composes：另一个类名
全局样式：global

css in js
书写方式：在 js 中书写 css
主要目的：和 css-module 一样解决冲突，能够使用 js 变量
缺点：违背 css/js 分离原则
常用库：

styled-components：docs
Global 全局样式

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.theme.fontFamily};
  }
`
// 使用
<React.Fragment>
    <Navigation /> {/* example of other top-level stuff */}
    <GlobalStyle whiteColor />
  </React.Fragment>

emotion

js in css
css 调用 js

css next: Use tomorrow’s CSS syntax, today
css houdini: Houdini-mdn
使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS

css Houdini

Houdini，称为史上最伟大魔术师、脱逃术师及特技表演者

css 里面每次遇到一个新的提案，都要经过很多年才会投入使用。比如 flexBox，2019年就被提出。
反观 js，一个新的提案，有了 babel 只需几天就有 pollyfill。
下面两张图就是对比：

js
css

为什么用不上 CSS Polyfill

js 在网页绘制过程中，所能触及到的地方有限。

avaScript Polyfills 只能去更改 DOM 和 CSSOM，大部分这样的操作，都会导致页面重新渲染

假如能改浏览器内部的渲染引擎

开发能便捷地提供 pollyfill

css houdini：正是由此而来
下图中灰色部分是还在实现中的部分，暂时无法使用。

CSS Properties and Values API

变量和属性

/* root element selector (全域) */
    :root {
      --main-color: #ff00ff;
      --main-bg: rgb(200, 255, 255);
      --block-font-size: 1rem;
    }

    .btn__active::after {
      --btn-text: 'This is btn';

      /* 相等於 --box-highlight-text:'This is btn been actived'; */
      --btn-highlight-text: var(--btn-text)' been actived';

      content: var(--btn-highlight-text);

      /* 也能使用 calc 來做運算 */
      font-size: calc(var(--block-font-size)*1.5);
    }

    body {
      /* variable usage */
      color: var(--main-color);
      background-color: var(--main-bg);
    }
    .box {
      --box-size: 40px;
      width: var(--box-size);
      height: var(--box-size);
      border: 1px solid #000;
      transition: all 3s;
    }

layout api

定义了一个颜色的属性, 背景采用自定义的 circle.

<!DOCTYPE html>
<style>
  #example {
    --circle-color: deepskyblue;

    background-image: paint(circle);
    font-family: sans-serif;
    font-size: 36px;
    transition: --circle-color 1s;
  }

  #example:focus {
    --circle-color: purple;
  }
</style>

<textarea id="example">
  CSS is awesome.
</textarea>

<script>
  CSS.registerProperty({
    name: '--circle-color',
    syntax: '<color>',
    initialValue: 'black',
    inherits: false
  });
  CSS.paintWorklet.addModule('circle.js');
</script>

这样我们需要定义 circle 行为。

// circle.js
registerPaint('circle', class {
  static get inputProperties() { return ['--circle-color']; }
  paint(ctx, geom, properties) {
    // Change the fill color.
    const color = properties.get('--circle-color');
    ctx.fillStyle = color;

    // Determine the center point and radius.
    const x = geom.width / 2;
    const y = geom.height / 2;
    const radius = Math.min(x, y);

    // Draw the circle \o/
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
    ctx.fill();
  }
});

参考

CSS魔术师Houdini API介绍

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css in js && js in css #53

css in js && js in css #53

MengZhaoFly commented Dec 24, 2019 •

edited

Loading

css in js && js in css #53

css in js && js in css #53

Comments

MengZhaoFly commented Dec 24, 2019 • edited Loading

css 发展

css Houdini

为什么用不上 CSS Polyfill

假如能改浏览器内部的渲染引擎

CSS Properties and Values API

layout api

参考

MengZhaoFly commented Dec 24, 2019 •

edited

Loading