%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/css
## What is It?
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://stylexjs.com/")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://stylexjs.com/" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">StyleX</div>
<div class="nifty-link-card-description">The styling system that powers Meta.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://stylexjs.com/img/favicon.svg">
https://stylexjs.com/
</div>
</div>
</a>
</div>
%% run end %%
## Features at a glance
### Scalable
- Minimize CSS output with atomic CSS.
- The CSS size plateaus even as the number of components grows.
- Styles remain readable and maintainable within growing codebases.
### Predictable
- Class names on an element can only directly style that same element.
- No specificity issues.
- “The last style applied always wins!”
### Composable
- Apply styles conditionally.
- Merge and compose arbitrary styles across component and file boundaries.
- Use local constants and expressions to keep styles DRY. Or repeat styles without worrying about performance.
### Fast
- No runtime style injection.
- ==All styles are bundled in a static CSS file at compile-time==.
- Optimized runtime for merging class names.
### Type-Safe
- Type-safe APIs.
- Type-safe styles.
- Type-safe themes.
## how to use it?
## Alternatives and comparison?
%% INCOMPLETE %%
- [[panda css]]
- [[tailwind]]