by Before Semicolon

Modern CSS

Write future CSS

If you don't use CSS preprocessors, writing simple CSS is powered by POST CSS with default preset env and other that allows you to:

@import "normalizer.css";
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
	--mainColor: #12345678;
}

body {
	color: var(--mainColor);
	font-family: system-ui;
	overflow-wrap: break-word;
}

input {
	appearance: none;
}
::placeholder {
	color: gray;
}

.image {
	background-image: url(image@1x.png);
}
@keyframes test {
	100% {opacity: 1}
}

@media (min-resolution: 2dppx) {
	.image {
		background-image: url(image@2x.png);
	}
}

:--heading {
	background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

	@media (--viewport-medium) {
		margin-block: 0;
	}
}

a {
	color: rgb(0 0 100% / 90%);

	&:hover {
		color: rebeccapurple;
	}
}