+
+
+
+
+
+
+
+
+
+
+```
+
+And I really like the way it works: the content is styled based on its semantic
+markup, and not on a HTML imposed structure.
+
+For example, here is [Bootstrap Modal component]:
+
+```html
+
+
+
+
+
Modal Title
+
+
+
+ Modal Body
+
+
+
+
+
+```
+
+Here is the [Modal component from Tailwind Plus]:
+
+```HTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Modal Title
+
+ Modal Body
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Compare those with [PicoCSS Modal component]:
+
+```html
+
+```
+
+It makes a huge difference in simplicity, readability and accessibility (note
+that the ARIA attributes are rendered useless because the semantic markup
+already carries that information).
+
+
+[TailwindCSS]: https://tailwindcss.com
+[CSS Selectors Level 4]: https://drafts.csswg.org/selectors-4/
+[BootstrapCSS]: https://getbootstrap.com
+[PicoCSS]: https://picocss.com
+[Bootstrap Modal Component]: https://getbootstrap.com/docs/4.3/components/modal/#live-demo
+[Modal component from Tailwind Plus]: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs
+[PicoCSS Modal component]: https://picocss.com/docs/modal
+
+## `@import` to split CSS files
+
+One last thing I liked to use SASS for was the possibility to split CSS files
+into smaller ones to make them easier to grasp. For example:
+
+```scss
+@use 'reset';
+@use 'typography';
+@use 'layout';
+@use 'content';
+```
+
+With the [CSS Cascading and Inheritance Level 5] module, CSS has that natively:
+
+```css
+@import url('reset.css');
+@import url('typography.css');
+@import url('layout.css');
+@import url('content.css');
+```
+
+From my understanding, the `@import`ed CSS files are downloaded in parallel,
+which reduces the penalty of having several files to download.
+
+CSS `@import` rules even have the benefit of being conditional. For example:
+
+```css
+@import url("light.css") only screen and (prefers-color-scheme: light);
+@import url('dark.css') only screen and (prefers-color-scheme: dark);
+```
+
+[CSS Cascading and Inheritance Level 5]: https://drafts.csswg.org/css-cascade-5/
+
+## Things I'm looking forward to
+
+Those are some things I'm looking forward to using. I do not use them yet
+because of browser support or because I did not have a use for them yet. But I'm
+excited to try them out.
+
+### CSS Mixins
+
+CSS Mixins are also a major feature of SASS, and foster a cleaner and more
+reusable CSS code.
+
+CSS will have them with the [CSS Functions and Mixins Module], which is still a
+draft where mixins are not specified yet.
+
+In the meantime, here is an example from [SASS Mixin Guide]:
+
+```scss
+@mixin rtl($property, $ltr-value, $rtl-value) {
+ #{$property}: $ltr-value;
+
+ [dir=rtl] & {
+ #{$property}: $rtl-value;
+ }
+}
+
+.sidebar {
+ @include rtl(float, left, right);
+}
+```
+
+Though in some cases, it can easily be replaced with CSS variables:
+
+```css
+:root {
+ --sidebar-float: left;
+}
+
+[dir=rtl] {
+ --sidebar-float: right;
+}
+
+.sidebar {
+ float: var(--sidebar-float);
+}
+```
+
+[SASS Mixin Guide]: https://sass-lang.com/documentation/at-rules/mixin/#arguments
+[CSS Functions and Mixins Module]: https://www.w3.org/TR/2025/WD-css-mixins-1-20250515/
+
+### CSS Custom Properties
+
+This one is a nice little feature from the [CSS Properties and Values API Level
+1] module which extends CSS variables nicely.
+
+They allow to define the type, initial value and inheritance rule of a custom
+variables. For example:
+
+```css {linenos=true}
+@property --my-color {
+ syntax: "";
+ inherits: false;
+ initial-value: black;
+}
+
+.primary {
+ --my-color: red;
+}
+
+.secondary {
+ --my-color: 10px;
+}
+
+button {
+ background-color: var(--my-color);
+ color: white;
+}
+
+```
+
+Here, the definition of `--my-color` on line 12 is not valid (it is a length and
+not a color). As the property value is not inherited from a parent, the initial
+value will be used: a `