%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/css
## What is It?
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/css-hooks/css-hooks")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/css-hooks/css-hooks" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - css-hooks/css-hooks: Hook into advanced CSS features from native inline styles.</div>
<div class="nifty-link-card-description">Hook into advanced CSS features from native inline styles. - GitHub - css-hooks/css-hooks: Hook into advanced CSS features from native inline styles.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/css-hooks/css-hooks
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/2cf1b9f051e0fa6ae7480d9a85d3f62a019e0b8219d40bc9bd6602cf8341e130/css-hooks/css-hooks')">
</div>
</div>
</a>
</div>
%% run end %%
==Hooks bring CSS features to native inline styles, enabling you to target various states such as hover, focus, and active, all without leaving the `style` prop==. For example, hooks can easily solve the common use case of applying state-driven styles to a link:
```js
<a
href="https://css-hooks.com/"
style={css({
color: "#03f",
fontSize: "1rem",
"&:hover": {
color: "#09f",
},
"&:active": {
color: "#e33",
},
"@media (1000px <= width)": {
fontSize: "1.25rem",
},
})}
>
Hooks
</a>
```
### What Problem it is Trying to Solve?
in inline style, you cannot write animations, styles for nested elements (i.e. all child elements, first-child, last-child), pseudo-classes (i.e. :hover), and pseudo-elements (::first-line) to name a few.
but why? 🤷♂️
> If one day CSS inline style support advanced CSS feature then this will be basically useless.
## How to Use It?
### 1. Installation
CSS Hooks offers a dedicated React integration to ensure a seamless developer experience. Install this via NPM or your package manager of choice, e.g.:
```
npm install @css-hooks/react
```
### 2. Create Hooks
To address a wide range of use cases, CSS Hooks is fully configurable, allowing you to define your own hooks. To keep things as simple as possible, let's start with a single `&:hover` hook. Create a new module in your project, e.g. `src/css.ts`, and copy the following example:
```ts
// src/css.ts
import { createHooks } from "@css-hooks/react";
export const [hooks, css] = createHooks({
"&:hover": "&:hover",
});
```
### 3. Add Static CSS
The `hooks` export from the module created in Step 2 consists of a static CSS string that must be included somewhere on the page. This could be achieved in any number of ways, but the easiest is simply to add a `<style>` element in your root component, e.g.:
```ts
// src/App.tsx
import { hooks } from "./css";
export default function App() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: hooks }} />
<h1>Hello world</h1>
</>
);
}
```
### 4. Use Hooks
Now you're ready to use your configured hooks. Simply import the `css` function and apply it to your style object. The style object continues to work exactly the same as in React's `style` prop API, except that it allows you to leverage your hooks by nesting additional style objects.
```ts
// src/Button.tsx
import { css } from "./css";
export default function Button(props: ButtonProps) {
return (
<button
{...props}
style={css({
color: "black",
"&:hover": { color: "blue" },
})}
/>
);
}
```
## Alternatives and Comparison?