CSS Components

  • 起步
  • .switch
  • .menu-icon
  • .menu-drawer
  • .router
  • .tabs
  • 其他配置
  • 原理
    •

    CSS Components

    Css-ComponentS 是一个纯 css 的组件库，目前只有四个组件：

    强调“纯 css”，小部分原因是“没有 js 的介入，逻辑将变得相当简单，js 就能更加关注业务”。 但不得不说，这个库只适合“少数人”。而“少数人”在中文里，并不是个好词，这里就是那个意思。 因为做这个库的主要原因是“好玩”。毕竟编程既是工作，也是生活，生活很枯燥，我得自己找乐子。 当然，我的乐子不一定是你的乐子，所以这个库真的只属于我这种“少数人”。

    使用 npm 安装

    npm install @ppzp/css-components

    然后，在你的代码里可以这样加载 switch 组件：

    import '@ppzp/css-components/switch.css'

    或者，直接从 CDN 加载，像这样：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>load from cdn</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/switch.css">
  </head>
  <body>
    <input class="ppz-ccs switch" type="checkbox">
  </body>
</html>
    下载源码独立页面打开

    CSS .switch

    基本用法

    最简案例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .switch</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/switch.css">
  </head>
  <body>
    <input class="ppz-ccs switch" type="checkbox">
  </body>
</html>
    下载源码独立页面打开

    慢一点，大一点

    传入“参数”font-size和ani-duration

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .switch</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/switch.css">
    <style>
      .ppz-ccs.switch {
        --font-size: 100px; /* 默认为 16px，如果你想要 2 倍大，则需设置为 32px */
        --ani-duration: 2s; /* 所有动画在 2 秒内完成 */
      }
    </style>
  </head>
  <body>
    <input class="ppz-ccs switch" type="checkbox">
  </body>
</html>
    下载源码独立页面打开

    CSS .menu-icon

    基本用法

    最简案例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .menu-icon</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/menu-icon.css">
  </head>
  <body>
    <label class="ppz-ccs menu-icon">
      <input type="checkbox">
    </label>
  </body>
</html>
    下载源码独立页面打开

    慢一点，大一点

    传入“参数”font-size和ani-duration

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .menu-icon</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/menu-icon.css">
    <style>
      .ppz-ccs.menu-icon {
        --font-size: 100px; /* 默认为 16px，如果你想要 2 倍大，则需设置为 32px */
        --ani-duration: 2s; /* 所有动画在 2 秒内完成 */
        --line-width: 10px; /* 线条粗细与整体尺寸解耦，这是故意的（九转大肠骄傲脸） */
        color: #482ff7; /* 这里使用 css 属性设置颜色，而不使用变量，是为了继承外层元素的颜色 */
      }
      .ppz-ccs.menu-icon:has(:checked) { /* 选中状态的线条粗细 */
        --line-width: 20px;
        color: #fc5c9c;
      }
    </style>
  </head>
  <body>
    <label class="ppz-ccs menu-icon">
      <input type="checkbox">
    </label>
  </body>
</html>
    下载源码独立页面打开

    CSS .menu-drawer

    基本用法

    最简案例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .menu-drawer</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/menu-drawer.css">
  </head>
  <body>
    <div class="ppz-ccs menu-drawer">
      <label class="ppz-ccs menu-icon">
        <input type="checkbox">
      </label>
      <div class="ppz-ccs menu-view">菜单内容区</div>
    </div>
  </body>
</html>
    下载源码独立页面打开

    来点参数

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .menu-drawer</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/menu-drawer.css">
    <style>
      body {
        display: flex;
        margin: 0;
        padding: 0;
        height: 100vh;
      }
      .menu-drawer, .menu-view, .menu-icon {
        --ani-duration: 3s;
      }
      .menu-icon {
        --font-size: 32px;
      }
      .menu-view {
        background: #f6f6f6;
      }
      main {
        padding: 2em 3em;
      }
      
    </style>
  </head>
  <body>
    <div class="ppz-ccs menu-drawer">
      <label class="ppz-ccs menu-icon">
        <input type="checkbox">
      </label>
      <div class="ppz-ccs menu-view">菜单内容区</div>
    </div>
    <main>正文内容区</main>
  </body>
</html>
    下载源码独立页面打开

    这个案例中，各部件的动画持续时间是需要“分开”设置的，为什么不在一处设置，然后对全体（或子元素们）生效呢？

    答：类似 .menu-drawer 这类“容器元素”（也就是说 .menu-drawer 里面存在其他元素）， 如果变量“对全体或子元素”生效，那将可能导致“对容器设置的参数”污染到“容器内的元素”。 比如，也许你可能只想让菜单展开得慢一点，其他元素的动画速度，保持原速度。

    CSS .router

    当我发现仅用 4 行 CSS 就能实现一个“路由”，也是大吃一惊！就是下面这四行：

    .ppz-ccs.router .ppz-ccs.page:not(:target) {
  display: none;
}
.ppz-ccs.router:not(:has(.ppz-ccs.page:target)) .ppz-ccs.page:first-child {
  display: block;
}

    基本用法

    最简案例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .router</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/router.css">
  </head>
  <body><a href="#page1">page1</a> <a href="#page2">page2</a> <a href="#page3">page3</a>
    <div class="ppz-ccs router">
      <div class="ppz-ccs page" id="page1">这是 page1</div>
      <div class="ppz-ccs page" id="page2">这是 page2</div>
      <div class="ppz-ccs page" id="page3">这是 page3</div>
    </div>
  </body>
</html>
    下载源码独立页面打开

    CSS .tabs

    基本用法

    最简案例：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf8">
    <title>CCS .tabs</title>
    <link rel="stylesheet" href="https://unpkg.com/@ppzp/css-components@0.0.11/tabs.css">
  </head>
  <body>
    <nav class="ppz-ccs tabs">
      <label class="ppz-ccs tab"><span>tab1</span>
        <input type="radio" name="tabxxx" checked>
      </label>
      <label class="ppz-ccs tab"><span>tab2</span>
        <input type="radio" name="tabxxx">
      </label>
    </nav>
    <div class="ppz-ccs tabs">
      <section class="ppz-ccs tab">这是 tab1 的内容</section>
      <section class="ppz-ccs tab">这是 tab2 的内容</section>
    </div>
  </body>
</html>
    下载源码独立页面打开

    CCS 其他配置

    全局参数

    TODO

    暗模式

    TODO

    CCS 原理

    css-components 和你正在看的这个网页都没有半句 js。 如果说 css-components 这个库，不使用 js 是为了防止 ui 逻辑入侵业务逻辑， 那么这个网页不使用 js 则纯属一种实验：验证一下不用 js 能做出什么效果。 我的结论是：没有 js 绝对不行；但是，仅 css 和 html 也可以做出有趣的东西。

    （这个网站虽然没有直接使用 js，但使用了 Nodejs 进行辅助处理）

    这里分享一下这个项目给我的经验。

    数据存在哪？

    css 是有变量的，但是 css 不能修改变量的值。 这里是用 html 保存数据的。 和 都可以保存状态。

    比如，你可以用 checkbox 保存“打开”与“关闭”的状态。

    或者，你的状态比较复杂，可以使用 radio，比如：

    来记录三种状态。

    如果你不喜欢太多 radio，也可以这样：

    组合一下，两个 checkbox 可以记录 4 种状态：

    一个 checkbox 不就是一个 bit 嘛~

    数据变化时，怎么响应的？

    答：使用选择器。

    看下面的例子：

    [type=checkbox] + div {
  width: 0;
}
[type=checkbox]:checked + div {
  width: 100px;
}

    这段 css 表达了一个“类似事件触发”的逻辑： 当 checkbox 未 check 时，后面的 div 宽度设为 0； 当 checkbox 已 check 时，后面的 div 宽度设为 100px。

    上面是响应事件的“原理”。 但实际使用时，这些“事件触发”经常会“误伤”到不相干的元素。 这就要求使用者，要对 css 选择器有较高的熟悉程度。 其中 :has 选择器、:nth-child 选择器（对元素结构有要求时）、直接子元素选择器、下一个兄弟元素选择器，非常有用。

    自定义参数？

    TODO

    亮暗模式？

    css 有个“媒体查询”是这样用的：（下面是真正的 css 代码，不是 less 或 scss）

    @media (prefers-color-scheme: dark) {
  div {
    color: green
  }
}

    ：系统切换成暗模式时，所有 div 的 color 设为 green。