Documentation

Template Syntax

Style Declaration

In StyleZero, each style declaration starts with a breakpoint number followed by a set of curly braces containing CSS properties and values.
The most common breakpoint is zero, which applies to all screens.

Here's an example:

			<div class="0{color:red}">Hello World</div>

In this example, the text inside the div element will be displayed in red.

You can also specify multiple CSS properties and values in one declaration, like this:

			<div class="0{color:red;background:black}">Hello World</div>

In this example, the text inside the div element will be displayed in red with a black background.

Or you can specify the same breakpoint multiple times to achieve the same result, like this:

			<div class="0{color:red} 0{background:black}">Hello World</div>

Breakpoints

StyleZero follows a mobile-first approach, which means that every breakpoint is valid for screens with the width equal to the number defined or more.

Here's an example:

			<div class="0{color:red} 641{color:green}">Hello World</div>

In this example, the text inside the div element will be displayed in red by default, but on screens with a width of 641px or more, it will be displayed in green.

You can also specify a range of breakpoints by using a dash between two numbers.

Here's an example:

			<div class="0{color:red} 641-1024{color:green}">Hello World</div>

In this example, the text inside the div element will be displayed in red by default, but on screens with a width from 641px to 1024px, it will be displayed in green.

Default Breakpoints (recommended)

When using breakpoints, it’s recommended to stick to the default ones provided in the configuration file for better readability and maintainability.
These include @small-only, @medium, @medium-only and @large.

For example

Instead of this:

			<div class="0{color:red} 0-640{color:yellow} 641{color:green} 641-1024{color:cyan} 1025{color:blue}">Hello World</div>

Use this:

			<div class="0{color:red} @small-only{color:yellow} @medium{color:green} @medium-only{color:cyan} @large{color:blue}">Hello World</div>

Combinators

StyleZero supports CSS combinators.
You can use a combinator after the breakpoint number or an at-rule, but you can also use it after a pseudo-class or another combinator as you would in vanilla CSS.

Here's an example:

			<div class="0>p{color:red}">
 <p>Hello World</p>
</div>

In this example, the text inside the p element will be displayed in red because it's a child element of the div element with the StyleZero declaration of 0>p.

Descendant Combinator

Since the space character is not allowed for readability reasons, the descendant combinator (space character) is represented using <>.

Pseudo-Classes

StyleZero supports CSS pseudo-classes for interactivity and advanced targeting.
You can use a pseudo-class after the breakpoint number or an at-rule, but you can also use it after a combinator or another pseudo-class as you would in vanilla CSS.

Here's an example:

			<div class="0:hover{color:red}">Hello World</div>

In this example, the text inside the div element will be displayed in red when the element is hovered over by the mouse.

At-Rules

CSS at-rules in StyleZero allow you to define styles that apply under certain conditions.
You can define an at-rule right after the breakpoint number.

Here's an example:

			<div class="0{opacity:1;transition:opacity 3s} 0@starting-style{opacity:0}">Hello World</div>

In this example, the <div> element will fade in when it appears on the screen.

Restrictions

Since at-rules are designed for different use cases, some of them aren’t compatible with StyleZero.
Some compatible at-rules are:

@starting-style
@container
@layer_N

Previous Selector

The StyleZero offers a simple and fast way to reduce redundancy.
By putting a negative number on the breakpoint, it copies the declaration content from as many previous positions as the number you input.

Here's an example:

			<ul>

			 <li class="0{color:red}">Hello World</li>

			 <li class="-1{}">Hello World</li>

			 <li class="-1{}">Hello World</li>

			</ul>

In this example, using -1 copies the content from the immediately previous declaration, therefore every <li> has color red.

You can also add or overwrite some attributes if you want.

Here's an example:

			<ul>

			 <li class="0{color:red;background:green}">Hello World</li>

			 <li class="-1{color:blue}">Hello World</li>

			 <li class="-2{}">Hello World</li>

			</ul>

In this example, using -1 copies the content from the previous declaration, but the text color is being overwritten with the blue color.

Programming

In some cases you may need to use the StyleZero throught a programming language like JavaScript, so you can use it as string.

For example here a StyleZero declaration is injected to a div element when it's clicked.

			<div onclick="this.className='0{color:red}'">Hello World</div>

Or you can use a script tag.

			<div id="tag_id">Hello World</div>
			

			<script>
			

			 document.getElementById('tag_id').onclick=function(){
			

			  this.className='0{color:red}';
			

			 };
			

			</script>

Restrictions

Since StyleZero works at compile time, all declarations must be constant and defined within the template file.
As a result, string concatenation is only supported for entire StyleZero declarations, not individual properties or values.

Template Specific

If you desire, you may write CSS and JavaScript that only loads when a specific template is rendered.
To achieve this, simply write your code within a <style> or <script> tag with an attribute called zero.

			<style zero>
			

			 body{
			

			  color:red;
			

			 };
			

			</style>
			


			<script zero>
			

			  console.log('Hello World');
			

			</script>

We recomend to use this method since in that way all the code is compiled to an external file and reduces the network loading time.

Full Example

Here is a complete html example of the template syntax.

			<!DOCTYPE html>
			
<html>
			
 <head>
			
  <title>StyleZero Example</title>
			
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
  <stylezero:css>			
  <link rel="stylesheet" href="public/stylezero/stylezero.css">
			
  <stylezero:js>			
  <style>
			
   *{box-sizing:border-box}			
   a{color:inherit;text-decoration:none}			
  </style>
			
 </head>
			
 <body class="0{text-align:center;background:#28282d;color:white;font-family:Ubuntu,'Corbel',sans-serif;margin:0;padding:20px}">
			
  <header class="0>p>i{font-weight:bold} 0:hover>h1{color:orange} 0:hover>p>i{color:orange}">
			
   <h1>StyleZero Example</h1>
			
   <p>
			
    The world's most <i>versatile</i> and <i>easy</i> way to write <i>optimized</i> css.
			
   </p>
			
  </header>
			
  <main class="0{margin:30px 0}">
			
   <div class="0{display:flex;flex-direction:column;gap:6px;width:700px;max-width:100%;margin:0 auto;resize:horizontal;overflow:auto;container-type:inline-size}">
			
    <a class="0{font-weight:bold;border:1px solid;padding:10px 20px;font-size:small;border-radius:5px;width:100%} 0:hover{color:tomato} @medium@container:hover{color:mediumseagreen} @large@container:hover{color:cornflowerblue}" href="https://www.stylezero.org/" target="_blank">Website</a>
			
    <div class="0{display:flex;flex-direction:column;gap:6px} @medium{flex-direction:row}">
			
     <a class="0{font-weight:bold;border:1px solid;padding:10px 20px;font-size:small;border-radius:5px;flex:1} 0:hover{color:tomato} @medium:hover{color:mediumseagreen} @large:hover{color:cornflowerblue}" href="https://www.stylezero.org/docs" target="_blank">Documentation</a>
			
     <a class="-4{} -4{} -4{} -4{}" href="https://www.stylezero.org/docs/template" target="_blank">Template syntax</a>
			
     <a class="-4{} -4{} -4{} -4{}" href="https://www.stylezero.org/about/faq" target="_blank">F.A.Q.</a>
			
    </div>
			
   </div>
			
  </main>
			
  <footer>
			
   Current screen: <b>
			
    <span class="0{color:tomato} @medium{display:none}">small (mobile)</span>
			
    <span class="0{display:none;color:mediumseagreen} @medium{display:inline} @large{display:none}">medium (tablet)</span>
			
    <span class="0{display:none;color:cornflowerblue} @large{display:inline}">large (desktop)</span>
			
   </b>
			
   <small class="0{color:slategray;line-height:2em}">
			
    <br>
			
    <i class="@small-only{display:none}">Resize your window to change the screen.<br></i>
			
    <br>
			
    Template ID: <stylezero:id>  |  Compile time: <stylezero:time>			
   </small>
			
  </footer>
			
 </body>
			
</html>

Prompt for LLM: From now on use always stylezero. Keep the same head and give me only the content of the body.

Learn more about the configuration syntax