ONCSS

オンCSS

oncss は、Web アプリケーションのスタイルを設定するための強力な CSS 関数を開発者に提供する CSS-in-JS ライブラリです。これにより、ネストされたセレクター、レスポンシブ デザイン、動的キーフレームなどの最新のスタイル手法が可能になり、同時に React などの JavaScript フレームワークとのシームレスな統合が可能になります。

---

インストール

npm 経由で oncss パッケージをインストールします:

npm install oncss

プロジェクトに CSS 関数をインポートします:

import css from 'oncss';

---

中心的な概念: css 関数

css 関数は oncss の中心であり、CSS を動的に生成してアプリケーションに挿入するように設計されています。以下をサポートします:

• CSS プロパティ: 標準の CSS プロパティと値を使用します。
• ネストされたセレクター: & を使用して子要素または状態にスタイルを適用します。
• メディア クエリ: @media ルールを使用してレスポンシブ デザインを実装します。
• キーフレーム: @keyframes を使用してアニメーションを作成します。
• グローバル スタイル: @global を使用してスタイルをグローバルに適用します。
• カスタム ブレークポイント: 応答性を高めるために再利用可能なブレークポイントを定義します。
• その他の at-rules: @container、@layer、@supports などの追加の at-rules を利用します。

基本的な例

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

構成オプション

CSS 関数は、オプション オブジェクトを通じてカスタマイズできます:

利用可能なプロパティ

Property	Type	Description
classPrefix	string	Adds a prefix to generated class names.
breakpoints	object	Custom breakpoints for responsive designs.
aliases	object	Custom shorthand properties for CSS rules.
injectStyle	boolean	Controls whether styles are auto-injected.
skipProps	function	Filters out unwanted properties.
getValue	function	Transforms property values dynamically.
getProps	function	Customizes specific property handling.

オプションを使用した例

npm install oncss

ブレークポイントの使用

スタイル内で定義されたブレークポイントを使用して、レスポンシブ デザインを作成できます。

import css from 'oncss';

---

反応の統合

oncss は React とシームレスに統合します。生成されたクラス名をコンポーネントに渡すだけです。

反応の例

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

高度な機能

ネストされたセレクター

子要素または疑似クラスにスタイルを適用します:

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

メディアクエリ

レスポンシブスタイルを簡単に追加:

const responsiveStyles = css({
  fontSize: 14,
  padding: {
    sm: 12,
    lg: 24
  },

}, {
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

キーフレーム

アニメーションを定義して使用する:

import React from 'react';
import css from 'oncss';

const buttonStyle = css({
  backgroundColor: 'green',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '8px',
  '&:hover': {
    backgroundColor: 'darkgreen',
  },
});

function Button() {
  return <button classname="{buttonStyle.toString()}">Click Me</button>;
}

export default Button;

グローバルスタイル

グローバル スタイルを簡単に適用します:

const cardStyles = css({
  padding: '20px',
  border: '1px solid #ccc',
  '& h1': {
    fontSize: '24px',
    margin: 0,
  },
  '&:hover': {
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
  },
});

---

サポートされているアットルール

oncss は、スタイル機能を強化するためにさまざまな CSS at-rule をサポートしています。以下は、サポートされている at-rules とその説明のリストです:

At-Rule	Description
@media	Used for applying styles based on media queries for responsive design.
@keyframes	Defines animations that can be applied to elements.
@global	Applies styles globally across the entire application.
@container	Used for container queries to apply styles based on container size.
@layer	Defines style layers to control the order of style application.
@supports	Applies styles based on the support of specific CSS features in the browser.

---

サーバー側のスタイル設定

oncss は、CSSFactory を利用して生成された CSS スタイルを保存および管理することにより、サーバーサイド レンダリング (SSR) をサポートします。これにより、サーバーでレンダリングされた HTML にスタイルを抽出して挿入できるようになります。

React を使用した例

React でサーバー側レンダリングに oncss を使用する方法の例を次に示します。

npm install oncss

formatCSSValue

formatCSSValue は、必要に応じて px などの単位を追加して、CSS 値をフォーマットするユーティリティ関数です。

import css from 'oncss';

---

TypeScript の統合

oncss は TypeScript の完全なサポートを提供し、CSS プロパティとオプションの型を定義できるようにします。

CSS プロパティの定義

CSSProps タイプを使用して CSS プロパティのタイプを定義できます。

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

タイプでのオプションの使用

オプション オブジェクトのタイプを定義することもできます:

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

---

結論

oncss は、最新の Web アプリケーションのスタイルを簡素化します。レスポンシブ デザインからキーフレーム アニメーションまでの堅牢な機能セットにより、開発者にとって非常に貴重なツールになります。

著者

ナクスルール・アーメド

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

GitHub プロフィール npm プロフィール

オープンソースプロジェクト

⚡️ 私を見つける場所

以上がONCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。