Documentation - Syntax.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Syntax
Marssel uses an intuitive syntax based on utility classes to style your HTML elements. This page explains all the conventions and formats available.
Basic format: Standard syntax
The basic syntax follows the pattern: property-[value]
<div class="bg-[0B63F3]">Blue background</div>
<p class="c-[ff0000]">Red text</p>
<button class="p-[20px]">20px padding</button>Abbreviated Properties
Marssel offers shortcuts for common properties:
<!-- Colors -->
<div class="bg-[blue]">background-color</div>
<p class="c-[red]">color</p>
<!-- Spacings -->
<div class="p-[10px]">padding</div>
<div class="m-[20px]">margin</div>
<div class="px-[15px]">padding-left and padding-right</div>
<div class="py-[15px]">padding-top and padding-bottom</div>
<!-- Dimensions -->
<div class="w-[100px]">width</div>
<div class="h-[200px]">height</div>
<!-- Typography -->
<p class="fs-[16px]">font-size</p>
<p class="fw-[700]">font-weight</p>Values and units: Standard CSS units
<!-- Pixels -->
<div class="w-[200px]">200 pixel width</div>
<!-- Percentages -->
<div class="w-[50%]">50% width</div>
<!-- Em/Rem -->
<p class="fs-[1.5rem]">1.5rem font size</p>
<p class="m-[2em]">2nd margin</p>
<!-- Viewport -->
<div class="h-[100vh]">Window height</div>
<div class="w-[50vw]">Window width</div>Automatic Base Classes
When you use component syntax (`---`), Marssel is smart enough to automatically add the base class for you.
For example, if you write class="btn-primary---[bg-[blue]]", Marssel's `autoAddBaseClasses` logic will parse the name and automatically add the `btn-primary` class to the element. If you write md--btn---[bg-[red]], it will add the `btn` class in responsive.
<button class="btn-primary---[bg-[blue]+c-[white]]">My Button</button>Compact Syntax (Grouped)
To style a component variant, you can group multiple utilities within brackets [...], separating them with +.
The syntax is [breakpoint]--[component]---[utility1+utility2].
<div class="card---[bg-[white]+p-[1rem]+rounded-[8px]]">
Card content
</div>
<button class="md--btn1---[bg-[blue]+c-[white]]:hover">
Button
</button>
<div class="menu---[bg-[gray]+c-[white]]>span menu---[fw-[700]]>a">
<span>Title</span>
<a>Link</a>
</div>
<div class="alert---[bg-[red]!+c-[white]]!">
Important alert
</div>Root Style Groups
If you don't need a base class but just want to group utilities under a single class (for clarity or reuse), you can omit the `component---` part.
The entire class becomes the selector.
Hover over me (Child turns green on parent hover)
Hover over me The span turns red in winter
Hover over me With a class
Hover over me With responsive lg--
Hover over me With the mmd-- response and a class
<div class="[p-[2rem]+bg-[white]+border-[1px_solid_eee]]">
Box
</div>
<div class="[c-[red]+fw-[700]]!">
Important text
</div>
<p class="fs-[40px] c-[green]>span:hover">
<span>Hover over me (Child turns green on parent hover)</span>
</p>
<p class="[fs-[20px]+c-[red]!]>span:hover">
Hover over me
<span>The span turns red in winter</span>
</p>
<p class="a---[fs-[40px]+c-[green]>span]!:hover ">
Hover over me
<span>With a class</span>
</p>
<p class="lg--[fs-[13px]+c-[orange]]!>span">
Hover over me
<span>With responsive lg--</span>
</p>
<p class="mmd--a22---[fs-[14px]+c-[purple]]>span">
Hover over me
<span>With the mmd-- response and a class</span>
</p>Priority with !important
To force the priority of a style, add the symbol ! at the end of your class. This adds !important to all generated CSS declarations.
Simple Style
Add ! after the value brackets to make the style important.
<div class="bg-[red]! c-[white] p-[1rem]">
Red background with !important
</div>
<div class="fs-[24px]! fw-[700]!">
Text with large size and weight
</div>Compact Syntax
In compact syntax, you can make either individual styles or the entire group important.
<!-- Important individual style -->
<div class="card---[bg-[blue]!+c-[white]+p-[2rem]]">
Only the background is important
</div>
<!-- Large whole group -->
<div class="alert---[bg-[red]+c-[white]+p-[1rem]]!">
All styles are important
</div>With Pseudo-classes
The ! also works with pseudo-classes like :hover, :focus, etc.
<!-- Normal hover -->
<button class="btn2---[bg-[blue]+c-[white]]:hover">
Normal hover
</button>
<!-- Important hover -->
<button class="btn21---[bg-[red]+c-[white]]!:hover p-[1rem] ml-[1rem]">
Important hover
</button>Root Groups
In root groups (without base component), add the ! after the final closing bracket.
<!-- Normal styles -->
<div class="[p-[2rem]+bg-[yellow]+c-[black]]">
Normal styles
</div>
<!-- All important styles -->
<div class="[p-[3rem]+bg-[orange]+c-[white]]!">
All important styles
</div>Managing Spaces and Commas
To handle CSS values that contain spaces or commas, Marssel uses two simple conventions.
Spaces (Replaced by _)
CSS class names cannot contain spaces. Therefore, whenever your CSS value requires a space, you must use an underscore _. Marssel will automatically convert it to space when generating the CSS.
<div class="border-[2px_solid_0B63F3] p-[1rem]">
border: 2px solid #0B63F3
</div>
<div class="font-[Open_Sans] fw-[700] mt-[1rem]">
font-family: 'Open Sans'
</div>
<div class="[content-[Bonjour_le_monde!]+c-[red]]:before mt-[1rem]">
content: "Bonjour le monde!"
</div>Commas (Used as is ,)
For CSS functions that require commas (like `rgba()`, `linear-gradient()`, `box-shadow`, etc.), you can use the comma , directly inside the [] brackets. Marssel recognizes it and correctly includes it in the generated value.
<div class="c-rgba-[255,100,50,0.8]">...</div>
<div class="bg-linear-[to_right,blue,red]">...</div>
<div class="box-shadow-[0_20px_6px_rgba(0,0,0,0.1)]">...</div>