ONCSS

oncss

oncss ist eine CSS-in-JS-Bibliothek, die Entwicklern eine leistungsstarke CSS-Funktion zum Gestalten ihrer Webanwendungen bietet. Es ermöglicht moderne Styling-Techniken, einschließlich verschachtelter Selektoren, responsivem Design und dynamischen Keyframes, und bietet gleichzeitig eine nahtlose Integration mit JavaScript-Frameworks wie React.

---

Installation

Installieren Sie das oncss-Paket über npm:

npm install oncss

Importieren Sie die CSS-Funktion in Ihr Projekt:

import css from 'oncss';

---

Kernkonzept: Die CSS-Funktion

Die CSS-Funktion ist das Herzstück von oncss und wurde entwickelt, um CSS dynamisch zu generieren und in Ihre Anwendung einzufügen. Es unterstützt:

• CSS-Eigenschaften: Standard-CSS-Eigenschaften und -Werte verwenden.
• Verschachtelte Selektoren: Wenden Sie Stile mit & auf untergeordnete Elemente oder Zustände an.
• Medienabfragen: Implementieren Sie responsive Designs mit @media-Regeln.
• Keyframes: Erstellen Sie Animationen mit @keyframes.
• Globale Stile: Wenden Sie Stile global mit @global an.
• Benutzerdefinierte Haltepunkte: Definieren Sie wiederverwendbare Haltepunkte für die Reaktionsfähigkeit.
• Andere At-Regeln: Nutzen Sie zusätzliche At-Regeln wie @container, @layer und @supports.

Grundlegendes Beispiel

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

---

Konfigurationsoptionen

Die CSS-Funktion kann über ein Optionsobjekt angepasst werden:

Verfügbare Eigenschaften

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.

Beispiel mit Optionen

npm install oncss

Verwenden von Haltepunkten

Sie können die definierten Haltepunkte in Ihren Stilen verwenden, um responsive Designs zu erstellen:

import css from 'oncss';

---

Reagieren Sie auf Integration

oncss lässt sich nahtlos in React integrieren. Übergeben Sie einfach den generierten Klassennamen an Ihre Komponente.

Reaktionsbeispiel

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

---

Erweiterte Funktionen

Verschachtelte Selektoren

Stile auf untergeordnete Elemente oder Pseudoklassen anwenden:

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

Medienanfragen

Fügen Sie ganz einfach responsive Stile hinzu:

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

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

Schlüsselbilder

Animationen definieren und verwenden:

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;

Globale Stile

Globale Stile mühelos anwenden:

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

---

Unterstützte At-Regeln

oncss unterstützt verschiedene CSS-At-Regeln, um Ihre Styling-Möglichkeiten zu verbessern. Hier ist eine Liste der unterstützten At-Regeln mit Beschreibungen:

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.

---

Serverseitiges Styling

oncss unterstützt serverseitiges Rendering (SSR) durch die Nutzung der CSSFactory zum Speichern und Verwalten generierter CSS-Stile. Dadurch können Sie Stile extrahieren und in Ihr vom Server gerendertes HTML einfügen.

Beispiel mit React

Hier ist ein Beispiel für die Verwendung von oncss für serverseitiges Rendering mit React:

npm install oncss

formatCSSValue

formatCSSValue ist eine Hilfsfunktion, die CSS-Werte formatiert und bei Bedarf Einheiten wie px hinzufügt.

import css from 'oncss';

---

TypeScript-Integration

oncss bietet vollständige TypeScript-Unterstützung, sodass Sie Typen für Ihre CSS-Eigenschaften und -Optionen definieren können.

Definieren von CSS-Eigenschaften

Sie können die Typen für Ihre CSS-Eigenschaften mithilfe des CSSProps-Typs definieren:

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

Verwenden von Optionen mit Typen

Sie können auch Typen für das Optionsobjekt definieren:

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

---

Abschluss

oncss vereinfacht das Styling für moderne Webanwendungen. Sein robuster Funktionsumfang, vom responsiven Design bis hin zu Keyframe-Animationen, macht es zu einem unschätzbar wertvollen Werkzeug für Entwickler.

Autor

Naxrul Ahmed

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

GitHub-Profil npm-Profil

Open-Source-Projekte

⚡️ Wo Sie mich finden

Das obige ist der detaillierte Inhalt vonONCSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!