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
Import the css function in your project:
import css from 'oncss';
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);
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
Using Breakpoints
You can use the defined breakpoints in your styles to create responsive designs:
import css from 'oncss';
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);
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, }, });
Media Queries
Easily add responsive styles:
const responsiveStyles = css({ fontSize: 14, padding: { sm: 12, lg: 24 }, }, { breakpoints: { sm: 480, md: 768, lg: 1024, }, });
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;
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)', }, });
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
formatCSSValue
formatCSSValue is a utility function that formats CSS values, adding units like px where necessary.
import css from 'oncss';
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);
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, }, });
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.
Author
![]() |
Naxrul Ahmed
Open Source Projects |
?? Where to find me
The above is the detailed content of ONCSS. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

There are three ways to selectively include CSS on a specific page: 1. Inline CSS, suitable for pages that are not frequently accessed or require unique styles; 2. Load external CSS files using JavaScript conditions, suitable for situations where flexibility is required; 3. Containment on the server side, suitable for scenarios using server-side languages. This approach can optimize website performance and maintainability, but requires balance of modularity and performance.

CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.

In the following tutorial, I will show you how to create Lottie animations in Figma. We'll use two colorful designs to exmplify how you can animate in Figma, and then I'll show you how to go from Figma to Lottie animations. All you need is a free Fig

We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no J

ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed

No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.

CSSCounters is a tool for creating automatic numbers. 1. Basic usage: define and operate counters through counter-reset and counter-increment, such as "SectionX." before h2. 2. Advanced usage: Use nested counters to create complex numbers, such as chapter and section numbers. 3. Notes: Ensure the counter is reset correctly, optimize performance, and simplify counter logic. 4. Best practice: clear naming, define counters in CSS, and use counter-increment and counter-reset reasonably.

CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.
