ONCSS-CSS Tutorial-php.cn

oncss

oncss is a CSS-in-JS library that provides developers with a powerful css function to style their web applications. It enables modern styling techniques, including nested selectors, responsive design, and dynamic keyframes, all while offering seamless integration with JavaScript frameworks like React.

Installation

Install the oncss package via npm:

npm install oncss

Copy after login

Import the css function in your project:

import css from 'oncss';

Copy after login

Core Concept: The css Function

The css function is the heart of oncss, designed to dynamically generate and inject CSS into your application. It supports:

CSS Properties: Use standard CSS properties and values.
Nested Selectors: Apply styles to child elements or states using &.
Media Queries: Implement responsive designs with @media rules.
Keyframes: Create animations with @keyframes.
Global Styles: Apply styles globally with @global.
Custom Breakpoints: Define reusable breakpoints for responsiveness.
Other At-Rules: Utilize additional at-rules like @container, @layer, and @supports.

Basic Example

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

Copy after login

Configuration Options

The css function can be customized through an options object:

Available Properties

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.

Example with Options

npm install oncss

Copy after login

Using Breakpoints

You can use the defined breakpoints in your styles to create responsive designs:

import css from 'oncss';

Copy after login

React Integration

oncss integrates seamlessly with React. Simply pass the generated class name to your component.

React Example

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

Copy after login

Advanced Features

Nested Selectors

Apply styles to child elements or pseudo-classes:

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

Copy after login

Media Queries

Easily add responsive styles:

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

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

Copy after login

Keyframes

Define and use 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;

Copy after login

Global Styles

Apply global styles effortlessly:

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

Copy after login

Supported At-Rules

oncss supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with 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.

Server-Side Styling

oncss supports server-side rendering (SSR) by utilizing the CSSFactory to store and manage generated CSS styles. This allows you to extract and inject styles into your server-rendered HTML.

Example with React

Here's an example of how to use oncss for server-side rendering with React:

npm install oncss

Copy after login

formatCSSValue

formatCSSValue is a utility function that formats CSS values, adding units like px where necessary.

import css from 'oncss';

Copy after login

TypeScript Integration

oncss provides full TypeScript support, allowing you to define types for your CSS properties and options.

Defining CSS Properties

You can define the types for your CSS properties using the CSSProps type:

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

Copy after login

Using Options with Types

You can also define types for the options object:

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

Copy after login

Conclusion

oncss simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.