lism-css-guide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Lism CSS Best Practices

Lism CSS 最佳实践

このスキルは、「Lism CSS」によるCSS設計理論の全体像と、実装時のベストプラクティスに関するガイドを提供します。

調和と統一感を生み出すデザイントークン設計、

@layer

で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。

バージョン情報: このガイドは
lism-css@0.14.0
/
@lism-css/ui@0.14.0
時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。

公式ドキュメント: https://lism-css.com/docs/overview/

本指南提供基于「Lism CSS」的CSS设计理论全貌，以及实现时的最佳实践。

其特点包括能创造协调统一感的设计令牌设计、通过

@layer

管理的基元设计，以及活用CSS变量实现的灵活响应式实用工具设计。

版本信息: 本指南基于
lism-css@0.14.0
/
@lism-css/ui@0.14.0
版本的内容编写。请确认项目中使用的版本，若与本指南版本不同，请告知用户。

官方文档: https://lism-css.com/docs/overview/

インストール

安装

CDNでCSSファイルのみ読み込む場合

仅通过CDN加载CSS文件的情况

html

<link href="https://cdn.jsdelivr.net/npm/lism-css@0.14.0/dist/css/main.css" rel="stylesheet" />

html

<link href="https://cdn.jsdelivr.net/npm/lism-css@0.14.0/dist/css/main.css" rel="stylesheet" />

npm パッケージ

npm 包

```
lism-css
```
— コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
```
@lism-css/ui
```
—
```
lism-css
```
を使って構築された UI コンポーネントライブラリ。Accordion, Modal, Tabs, Button, Badge, Callout 等を React/Astro で提供。

```
lism-css
```
— 核心包。提供Lism CSS主体文件、布局基元、设计令牌、Property Class、React/Astro组件。
```
@lism-css/ui
```
— 基于
```
lism-css
```
构建的UI组件库。提供Accordion、Modal、Tabs、Button、Badge、Callout等React/Astro组件。

CSS 読み込み

CSS 加载

import 'lism-css/main.css';

import 'lism-css/main.css';

コンポーネント読み込み例

组件加载示例

jsx

// React
import { Flex, Stack, Grid, Columns } from 'lism-css/react';
import { Accordion, Tabs, Button } from '@lism-css/ui/react';

// Astro
import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
import { Accordion, Tabs, Button } from '@lism-css/ui/astro';

jsx

// React
import { Flex, Stack, Grid, Columns } from 'lism-css/react';
import { Accordion, Tabs, Button } from '@lism-css/ui/react';

// Astro
import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
import { Accordion, Tabs, Button } from '@lism-css/ui/astro';

実装ルール

实现规则

基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く

基本方针: 尽可能使用Lism CSS提供的类、CSS变量、组件进行编写

まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。

```
l--
```
,
```
a--
```
,
```
is--
```
などの Primitive Class や
```
c--
```
などの Component Class を用いることができるか？（React, Astroの場合は
```
Lism
```
,
```
Stack
```
,
```
Flex
```
,
```
Columns
```
等のコンポーネントを利用して構築できるか？）
Lism の用意している
```
set--
```
系クラス、
```
u--
```
系クラスは使えないか？
Property Class (
```
-{prop}:{value}
```
or
```
<Lism prop="value">
```
))を使ってスタイリングできるか？
値をレスポンシブに切り替える時は Lism の Property Class (
```
-{prop}_{bp}
```
or
```
<Lism prop={[...]}>
```
)を使って実装できるか？
カラー・余白・フォントサイズ・タイポグラフィ・行間（ハーフレディング）・サイズ・角丸・シャドウなどはトークン値を流用できないか？
その他、Lismが用意するCSS変数を活用できないか？

请先对照以下检查清单，思考Lism CSS能实现的功能后再制定实现方案。

是否可以使用
```
l--
```
、
```
a--
```
、
```
is--
```
等基元类或
```
c--
```
等组件类？（React、Astro环境下是否可以利用
```
Lism
```
、
```
Stack
```
、
```
Flex
```
、
```
Columns
```
等组件构建？）
是否可以使用Lism提供的
```
set--
```
系列类、
```
u--
```
系列类？
是否可以通过Property Class (
```
-{prop}:{value}
```
或
```
<Lism prop="value">
```
)进行样式设置？
需要响应式切换值时，是否可以通过Lism的Property Class (
```
-{prop}_{bp}
```
或
```
<Lism prop={[...]}>
```
)实现？
颜色、边距、字体大小、排版、行高（半行距）、尺寸、圆角、阴影等是否可以复用令牌值？
除此之外，是否可以活用Lism提供的CSS变量？

ネイティブCSS で書くもの（必要に応じて適切な

@layer

内で書くこと）

需要用原生CSS编写的内容（需根据情况在合适的

@layer

内编写）

Lismにないアニメーションやhoverエフェクト（適宜クラスを追加して使用する）
独自コンポーネントの実装に合わせた
```
c--
```
クラス(
```
@layer lism-component
```
内で定義する)
複雑なセレクタ（
```
:nth-child
```
,
```
::before
```
,
```
::after
```
等）を使用する必要があるスタイル
カスタムプロパティを使った独自の計算式が必要なスタイル
その他、Lism のトークンやプリミティブでカバーできない特殊なスタイル

Lism未包含的动画或hover效果（可适当添加类后使用）
适配自定义组件实现的
```
c--
```
类（需在
```
@layer lism-component
```
内定义）
需要使用复杂选择器（
```
:nth-child
```
、
```
::before
```
、
```
::after
```
等）的样式
需要使用自定义属性进行独特计算的样式
其他无法通过Lism令牌或基元覆盖的特殊样式

コンポーネント化のルール

组件化规则

同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
コンポーネントはできる限り
```
<Lism>
```
系コアコンポーネントやレイアウトプリミティブ（
```
Stack
```
,
```
Flex
```
,
```
Columns
```
等）をベースに構築すること。
カスタムクラスが必要な場合は
```
.c--{name}
```
の命名規則に従う。

相同样式组合在3处以上使用时，需考虑拆分为组件。
组件应尽可能以
```
<Lism>
```
系列核心组件或布局基元（
```
Stack
```
、
```
Flex
```
、
```
Columns
```
等）为基础构建。
需要自定义类时，请遵循
```
.c--{name}
```
的命名规范。

間違いやすい例

易出错示例

NG	OK	理由
`<Heading level={3}>`	`<Heading level="3">`	`level` は文字列型（ `'1'` 〜 `'6'` ）
`hov="shadow"`	`hov="bxsh"`	Lism の省略名は `bxsh` （box-shadow）
`bgc="secondary"`	`bgc="base-2"`	カラートークンの間違い
`p="8"` , `g="6"`	`p="20"` , `g="10"`	スペーストークンの間違い

错误示例	正确示例	理由
`<Heading level={3}>`	`<Heading level="3">`	`level` 为字符串类型（ `'1'` 至 `'6'` ）
`hov="shadow"`	`hov="bxsh"`	Lism的缩写为 `bxsh` （对应box-shadow）
`bgc="secondary"`	`bgc="base-2"`	颜色令牌使用错误
`p="8"` , `g="6"`	`p="20"` , `g="10"`	间距令牌使用错误

NG: レスポンシブの考慮漏れ・Gridの直書き

错误示例: 忽略响应式适配、直接编写Grid

渡されたPCサイズのデザインだけをみて、カラムレイアウトを

<Grid gtc="repeat(3, 1fr)>

のように固定してしまわないようにすること。特に指示がなければ、レスポンシブを意識して実装する。

<Columns>

（

l--columns

）を使ってブレイクポイントで切り替えるか、

l--sideMain

や

l--fluidCols

で自動レスポンシブを採用することを検討する。

また、Lism CSSではコンテナクエリを採用しているため、レスポンシブの値切り替えには先祖要素で

isContainer

(

is--container

クラス) が必要なことに注意。

请勿仅根据提供的PC尺寸设计，将列布局固定为

<Grid gtc="repeat(3, 1fr)>

。若无特殊指示，请以响应式为前提进行实现。可考虑使用

<Columns>

（

l--columns

）在断点处切换，或采用

l--sideMain

、

l--fluidCols

实现自动响应式。

另外，Lism CSS采用容器查询，因此响应式值切换时需注意祖先元素需要添加

isContainer

（

is--container

类）。

NG: コンテンツ幅のハードコーディング

错误示例: 硬编码内容宽度

ページ全体のデザインデータを渡された時、サイト幅やセクションエリアのサイズをpxでハードコーディングする前に、

--sz--

トークンを活用できないかをまずは考えてください。

<Lism as="section" max-sz="m"

-max-sz:m

クラス) などの指定でコンテンツ幅を管理することができます。

收到页面整体设计数据时，请勿直接用px硬编码网站宽度或区域尺寸，应先考虑是否可以活用

--sz--

令牌。可通过

<Lism as="section" max-sz="m">

（

-max-sz:m

类）等方式管理内容宽度。

詳細リファレンス

详细参考

このスキルには以下の詳細ファイルが含まれます。必要に応じて参照してください。

tokens.md — Lismで利用できるデザイントークンとCSS変数。（余白・フォントサイズ・タイポグラフィ・角丸・影・カラー・不透明度）
css-rules.md — CSS設計の概要。（Layer構造・クラスの分類・プレフィックスのつけ方・Component クラス（
```
c--
```
）・カスタムCSSの追加ルール）
naming.md — 命名規則の詳細。（CSS変数名・クラス名・Property Class の
```
{prop}
```
/
```
{value}
```
の省略ルール）
base-styles.md — HTML要素のベーススタイリング。（Reset CSSやHTML要素の基本スタイルをカスタマイズできるCSS変数）
set-class.md — ベーススタイル・変数セットに使用する
```
set--
```
クラスの一覧と用途。
primitive-class.md — レイアウトを組み立てる Primitive クラス（
```
is--
```
/
```
l--
```
/
```
a--
```
）の一覧と用途。
utility-class.md — 具体的な用途・装飾・機能を持つユーティリティクラス（
```
u--
```
クラス）の一覧と用途。
property-class.md — 単一のCSSプロパティに対応するProperty Class（
```
-{prop}:{value}
```
形式のクラス）の一覧・記法。
prop-responsive.md — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
components-core.md —
```
lism-css
```
パッケージに含まれるコアコンポーネントの一覧と用途。（React, Astroで使える
```
<Lism>
```
・Lism Props・getLismProps ）
components-ui.md —
```
@lism-css/ui
```
パッケージに含まれるUIコンポーネント（Accordion・Modal・Tabs・Button 等）の Props・構造とCLIコマンドによるインストール方法。
customize.md — SCSS変数の上書きによる、lism-cssのコアCSSの挙動カスタマイズ方法・
```
lism.config.js
```
によるコアコンポーネント挙動のカスタマイズ方法。

これら各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。

本指南包含以下详细文件，可根据需要参考。

tokens.md — Lism可用的设计令牌与CSS变量。（边距、字体大小、排版、圆角、阴影、颜色、不透明度）
css-rules.md — CSS设计概要。（Layer结构、类的分类、前缀规则、组件类（
```
c--
```
）、自定义CSS添加规则）
naming.md — 命名规范详情。（CSS变量名、类名、Property Class的
```
{prop}
```
/
```
{value}
```
缩写规则）
base-styles.md — HTML元素基础样式。（可自定义Reset CSS及HTML元素基础样式的CSS变量）
set-class.md — 用于基础样式、变量设置的
```
set--
```
类列表及用途。
primitive-class.md — 用于构建布局的基元类（
```
is--
```
/
```
l--
```
/
```
a--
```
）列表及用途。
utility-class.md — 具备具体用途、装饰、功能的实用工具类（
```
u--
```
类）列表及用途。
property-class.md — 对应单一CSS属性的Property Class（
```
-{prop}:{value}
```
格式类）列表及语法。
prop-responsive.md — 响应式适配（断点、容器查询）的写法及规范。
components-core.md —
```
lism-css
```
包中包含的核心组件列表及用途。（React、Astro可用的
```
<Lism>
```
、Lism Props、getLismProps）
components-ui.md —
```
@lism-css/ui
```
包中包含的UI组件（Accordion、Modal、Tabs、Button等）的Props、结构及通过CLI命令的安装方法。
customize.md — 通过覆盖SCSS变量自定义lism-css核心CSS行为的方法、通过
```
lism.config.js
```
自定义核心组件行为的方法。

这些文件开头均包含TOC（目录），汇总了各章节的详细URL及源码URL。

Primitive 単位の詳細リファレンス

基元单元详细参考

l--*

is--*

a--*

クラスや対応するコンポーネント（

<Flex>

<Grid>

等）を使ってUIを実装する時は、以下の Primitive 別ファイルを参照してください。

Layout Primitives

```
l--box
```
/
```
<Box>
```
: primitives/l--box.md
```
l--flex
```
/
```
<Flex>
```
: primitives/l--flex.md
```
l--stack
```
/
```
<Stack>
```
: primitives/l--stack.md
```
l--cluster
```
/
```
<Cluster>
```
: primitives/l--cluster.md
```
l--grid
```
/
```
<Grid>
```
: primitives/l--grid.md
```
l--flow
```
/
```
<Flow>
```
: primitives/l--flow.md
```
l--center
```
/
```
<Center>
```
: primitives/l--center.md
```
l--frame
```
/
```
<Frame>
```
: primitives/l--frame.md
```
l--columns
```
/
```
<Columns>
```
: primitives/l--columns.md
```
l--tileGrid
```
/
```
<TileGrid>
```
: primitives/l--tileGrid.md
```
l--fluidCols
```
/
```
<FluidCols>
```
: primitives/l--fluidCols.md
```
l--switchCols
```
/
```
<SwitchCols>
```
: primitives/l--switchCols.md
```
l--sideMain
```
/
```
<SideMain>
```
: primitives/l--sideMain.md

Trait Primitives

```
is--container
```
/
```
<Container>
```
: primitives/is--container.md
```
is--wrapper
```
/
```
<Wrapper>
```
: primitives/is--wrapper.md
```
is--layer
```
/
```
<Layer>
```
: primitives/is--layer.md
```
is--boxLink
```
/
```
<BoxLink>
```
: primitives/is--boxLink.md

Atomic Primitives

```
a--icon
```
/
```
<Icon>
```
: primitives/a--icon.md
```
a--divider
```
/
```
<Divider>
```
: primitives/a--divider.md
```
a--spacer
```
/
```
<Spacer>
```
: primitives/a--spacer.md
```
a--decorator
```
/
```
<Decorator>
```
: primitives/a--decorator.md

使用

l--*

is--*

a--*

类或对应组件（

<Flex>

、

<Grid>

等）实现UI时，请参考以下按基元分类的文件。

布局基元

```
l--box
```
/
```
<Box>
```
: primitives/l--box.md
```
l--flex
```
/
```
<Flex>
```
: primitives/l--flex.md
```
l--stack
```
/
```
<Stack>
```
: primitives/l--stack.md
```
l--cluster
```
/
```
<Cluster>
```
: primitives/l--cluster.md
```
l--grid
```
/
```
<Grid>
```
: primitives/l--grid.md
```
l--flow
```
/
```
<Flow>
```
: primitives/l--flow.md
```
l--center
```
/
```
<Center>
```
: primitives/l--center.md
```
l--frame
```
/
```
<Frame>
```
: primitives/l--frame.md
```
l--columns
```
/
```
<Columns>
```
: primitives/l--columns.md
```
l--tileGrid
```
/
```
<TileGrid>
```
: primitives/l--tileGrid.md
```
l--fluidCols
```
/
```
<FluidCols>
```
: primitives/l--fluidCols.md
```
l--switchCols
```
/
```
<SwitchCols>
```
: primitives/l--switchCols.md
```
l--sideMain
```
/
```
<SideMain>
```
: primitives/l--sideMain.md

特性基元

```
is--container
```
/
```
<Container>
```
: primitives/is--container.md
```
is--wrapper
```
/
```
<Wrapper>
```
: primitives/is--wrapper.md
```
is--layer
```
/
```
<Layer>
```
: primitives/is--layer.md
```
is--boxLink
```
/
```
<BoxLink>
```
: primitives/is--boxLink.md

原子基元

```
a--icon
```
/
```
<Icon>
```
: primitives/a--icon.md
```
a--divider
```
/
```
<Divider>
```
: primitives/a--divider.md
```
a--spacer
```
/
```
<Spacer>
```
: primitives/a--spacer.md
```
a--decorator
```
/
```
<Decorator>
```
: primitives/a--decorator.md

このスキルファイル自身のアップデート方法

本指南文件自身的更新方法

skills add lism-css/lism-css

を再実行してください。更新があるか確認したい場合は、GitHub リポジトリを直接チェックしてください。

请重新执行

skills add lism-css/lism-css

。若想确认是否有更新，请直接查看GitHub 仓库。

lism-css-guide

Original

Translation

Lism CSS Best Practices

Lism CSS 最佳实践

インストール

安装

CDNでCSSファイルのみ読み込む場合

仅通过CDN加载CSS文件的情况

npm パッケージ

npm 包

CSS 読み込み

CSS 加载

コンポーネント読み込み例

组件加载示例

実装ルール

实现规则

基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く

基本方针: 尽可能使用Lism CSS提供的类、CSS变量、组件进行编写

ネイティブCSS で書くもの（必要に応じて適切な
`@layer`
内で書くこと）

需要用原生CSS编写的内容（需根据情况在合适的
`@layer`
内编写）

コンポーネント化のルール

组件化规则

間違いやすい例

易出错示例

NG: レスポンシブの考慮漏れ・Gridの直書き

错误示例: 忽略响应式适配、直接编写Grid

NG: コンテンツ幅のハードコーディング

错误示例: 硬编码内容宽度

詳細リファレンス

详细参考

Primitive 単位の詳細リファレンス

基元单元详细参考

このスキルファイル自身のアップデート方法

本指南文件自身的更新方法

lism-css-guide

Original

Translation

Lism CSS Best Practices

Lism CSS 最佳实践

インストール

安装

CDNでCSSファイルのみ読み込む場合

仅通过CDN加载CSS文件的情况

npm パッケージ

npm 包

CSS 読み込み

CSS 加载

コンポーネント読み込み例

组件加载示例

実装ルール

实现规则

基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く

基本方针: 尽可能使用Lism CSS提供的类、CSS变量、组件进行编写

ネイティブCSS で書くもの（必要に応じて適切な @layer 内で書くこと）

需要用原生CSS编写的内容（需根据情况在合适的@layer内编写）

コンポーネント化のルール

组件化规则

間違いやすい例

易出错示例

NG: レスポンシブの考慮漏れ・Gridの直書き

错误示例: 忽略响应式适配、直接编写Grid

NG: コンテンツ幅のハードコーディング

错误示例: 硬编码内容宽度

詳細リファレンス

详细参考

Primitive 単位の詳細リファレンス

基元单元详细参考

このスキルファイル自身のアップデート方法

本指南文件自身的更新方法

ネイティブCSS で書くもの（必要に応じて適切な
`@layer`
内で書くこと）

需要用原生CSS编写的内容（需根据情况在合适的
`@layer`
内编写）