ONCSS

oncss

oncss est une bibliothèque CSS-in-JS qui fournit aux développeurs une puissante fonction CSS pour styliser leurs applications Web. Il permet des techniques de style modernes, notamment des sélecteurs imbriqués, une conception réactive et des images clés dynamiques, tout en offrant une intégration transparente avec les frameworks JavaScript comme React.

---

Installation

Installez le package oncss via npm :

npm install oncss

Importez la fonction css dans votre projet :

import css from 'oncss';

---

Concept de base : la fonction CSS

La fonction css est le cœur d'oncss, conçue pour générer et injecter dynamiquement du CSS dans votre application. Il prend en charge :

• Propriétés CSS : utilisez les propriétés et les valeurs CSS standard.
• Sélecteurs imbriqués : appliquez des styles aux éléments ou états enfants à l'aide de &.
• Requêtes média : implémentez des conceptions réactives avec les règles @media.
• Keyframes : créez des animations avec @keyframes.
• Styles globaux : appliquez des styles globalement avec @global.
• Points d'arrêt personnalisés : définissez des points d'arrêt réutilisables pour plus de réactivité.
• Autres règles At : utilisez des règles at supplémentaires telles que @container, @layer et @supports.

Exemple de base

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);

---

Options de configuration

La fonction css peut être personnalisée via un objet options :

Propriétés disponibles

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.

Exemple avec options

npm install oncss

Utiliser des points d'arrêt

Vous pouvez utiliser les points d'arrêt définis dans vos styles pour créer des designs réactifs :

import css from 'oncss';

---

Intégration de réaction

oncss s'intègre parfaitement à React. Transmettez simplement le nom de classe généré à votre composant.

Exemple de réaction

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);

---

Fonctionnalités avancées

Sélecteurs imbriqués

Appliquer des styles aux éléments enfants ou aux pseudo-classes :

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

Requêtes multimédias

Ajoutez facilement des styles réactifs :

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

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

Images clés

Définir et utiliser des animations :

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;

Styles globaux

Appliquez des styles globaux sans effort :

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)',
  },
});

---

Règles At prises en charge

oncss prend en charge diverses règles at CSS pour améliorer vos capacités de style. Voici une liste des règles at prises en charge avec des descriptions :

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.

---

Style côté serveur

oncss prend en charge le rendu côté serveur (SSR) en utilisant CSSFactory pour stocker et gérer les styles CSS générés. Cela vous permet d'extraire et d'injecter des styles dans votre HTML rendu par le serveur.

Exemple avec React

Voici un exemple d'utilisation d'oncss pour le rendu côté serveur avec React :

npm install oncss

formatCSSValeur

formatCSSValue est une fonction utilitaire qui formate les valeurs CSS, en ajoutant des unités comme px si nécessaire.

import css from 'oncss';

---

Intégration TypeScript

oncss fournit une prise en charge complète de TypeScript, vous permettant de définir des types pour vos propriétés et options CSS.

Définir les propriétés CSS

Vous pouvez définir les types de vos propriétés CSS en utilisant le type CSSProps :

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);

Utilisation des options avec les types

Vous pouvez également définir des types pour l'objet options :

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

---

Conclusion

oncss simplifie le style pour les applications Web modernes. Son ensemble de fonctionnalités robustes, de la conception réactive aux animations d'images clés, en fait un outil inestimable pour les développeurs.

Auteur

Naxrul Ahmed

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

Profil GitHub Profil npm

Projets open source

⚡️Où me trouver

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!