a month ago


Currently in release candidate and moving towards stable.

On this page

Release phases

Now that we're at the release candidate, we can more accurately estimate arrival times based on the task at hand:

Since the syntax and API of Master CSS are expected to be in use for many years, even though v2 is nearing completion, it will take us some time to validate its market acceptance and solidify its foundation.

At this stage, Master CSS is nearly stable, which means there will be no further breaking changes.

Current tasks

🟠 Improving documentation

Initially, the v1 docs were rushed into release, making its content rather rudimentary and potentially challenging to comprehend.

Our goal for our upcoming v2 docs is to present a comprehensive and elegantly crafted syntax document. This enables developers to grasp the intricacies of CSS effortlessly, thus enhancing understanding through our meticulous documentation.

View the states of all the documents
Getting Started
🟢Code LintingAn official ESLint plugin for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
🟢General InstallationThe easiest way to use Master CSS from scratch is to initialize the runtime engine directly in the application's entry file.
🟢InstallationMaster CSS allows you to install from package managers, copy and paste from CDNs, and even integrate with frameworks.
🚧Language ServiceEnhanced Master CSS development experience, including syntax highlighting, code completion, syntax rule preview, and more.
🟢Language Service for Visual Studio CodeLanguage Service APIs for major IDE extensions.
🟢MigrationMigrate your current CSS technologies and projects to Master CSS.
Get a quick overview of Master CSS and its benefits.
🟢Using CDNsCopy and paste CDNs to instantly launch the runtime engine in your browser out of the box.
Syntax Tutorial
Apply styles based on theme, print, and other modes and queries.
🚧State SelectorsApply styles based on user interactions, element states, and other states.
🟢Style DeclarationsMaster CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.
Implement styles with more flexibility, using dynamic variables.
🟢Markup-drivenMaster CSS styles are driven by template markups and generate CSS rules on demand.
🟢Global StylesNormalize browser and preset global styles for more concise-style programming.
🟢Rendering ModesMaster CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your current business requirements.
🟢Responsive DesignAdapt your user interface to different devices with flexible responsive syntax.
This guide helps develop concepts for code reuse and de-duplication techniques.
🟢Browser SupportThe core engine of Master CSS hardly affects CSS support for browsers.
Use design tokens to switch between different theme modes.
Production Optimization
Speed up initial page loads by lazy loading the runtime engine.
🚧MinimizationReduce on-page CSS output and complexity using Master CSS APIs.
Render pages early to improve user experience and SEO.
🟢Critical ResourcesThe runtime engine plays a crucial role in the initial display of a page.
🟢Unstyled ContentImprove the page loading experience and ensure seamless rendering of content.
Design Variables
🟢Base ColorsCustomizing base color variables or starting with the official design system.
🟢ColorsCustomizing color variables or starting with the crafted palette.
🟢FontsCustomizing fonts for your design system.
🟢ScreensCustomizing screens and breakpoints or starting with the official design system.
🟢Spacing & SizingApply consistent sizes across your application.
🟢Text ColorsCustomizing text color variables or starting with the official design system.
Custom Syntax
🟢AnimationsCustomizing animation keyframes for your design system.
🟢ConfigurationImplement your design system using the configuration API.
🚧FunctionsCustomizing functions for your design system.
🚧Media QueriesCustomizing media queries and breakpoints for your design system.
🚧RulesCustomizing syntax rules for your design system.
🚧SelectorsCustomizing selectors for your design system.
🚧SemanticsCustomizing semantic classes for your design system.
🟢StylesCustomizing abstract styles for your design system.
🚧VariablesCustomizing variables for your design tokens.
API Reference
🟢@master/create-cssCLI for creating a Master CSS config file or application.
🟢@master/cssThe core syntax parsing of Master CSS.
🟢@master/css-cliCommand line interface for Master CSS.
🟢@master/css-extractorMaster CSS static extractor for various raw text extraction.
🟢@master/css-runtimeThe core syntax parsing and runtime engine of Master CSS.
🟢@master/css-validatorValidator for Master CSS syntactic class.
🟢@master/eslint-config-cssThe ESLint configuration and plugin reference for Master CSS.
🚧class-variantCreate reusable, extensible, and customizable style class variants.
🟢theme-serviceStandard CSS theme switching and service for Master CSS.
🚧Accent ColorSetting the accent color of user interface elements or controls.
🚧Align ContentControlling how multiple rows or columns are aligned along its cross axis.
🚧Align ItemsControlling how items are aligned along its cross axis.
🚧Align SelfControlling how an individual item is aligned along its cross axis.
🟢AnimationApplying an animation between styles.
🚧Animation DelaySetting a time to delay before beginning to perform the animation.
🟢Animation DirectionSetting the direction of the animation.
🚧Animation DurationSetting the length of time that an animation takes to complete one cycle.
🚧Animation Fill ModeSetting how a CSS animation applies styles to its target before and after its execution.
🟢Animation Iteration CountSetting the number of times an animation should be played.
🚧Animation NameSetting the names of the animation.
🟢Animation Play StateSetting whether an animation is running or paused.
🚧Animation Timing FunctionSetting speed curve of the animation.
🚧AppearanceControlling the native appearance of UI controls.
🚧Aspect RatioSetting the ratio for the box.
🚧Backdrop FilterStyle syntax for applying filter effects to the area behind an target element.
🚧BackgroundSetting all background style properties at once.
🚧Background AttachmentSetting whether position of background image is fixed when scrolling.
🚧Background Blend ModeSetting how an element's background images should blend with the background color.
🚧Background ClipControlling how clip the background.
🟢Background ColorSetting the background color of an element.
🚧Background ImageSetting background images on an element.
🚧Background OriginSetting the background's origin.
🚧Background PositionSetting the initial position for background image.
🚧Background RepeatSetting how background images are repeated.
🚧Background SizeSetting the size of the background image.
🚧BorderSetting an element’s border.
🚧Border CollapseSetting whether table cell have shared or separate borders.
🚧Border ColorSetting the color of an element’s border.
🚧Border RadiusSetting radius of an element’s corners.
🚧Border StyleSetting the line style for an element’s border.
🚧Border WidthSetting the width of an element’s border.
🟢Box Decoration BreakSetting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
🚧Box ShadowAdding shadow effects around an element.
🚧Box SizingSetting how the total width and height of an element is calculated.
🚧Break AfterControlling how page, column, or region breaks should occur after an element.
🚧Break BeforeControlling how page, column, or region breaks should occur before the specified element.
🚧Break InsideControlling how page, column, or region breaks should occur within the specified element.
🚧Caret ColorSetting the color of the cursor in text input.
🚧ClearMoving an element below floating elements instead of floating to the left or right.
🚧Clip PathCreating a clipping region.
🟢ColorSetting foreground color of an element.
🚧Column SpanSetting how elements span across multiple columns.
🟢ColumnsSetting the number of columns within the container.
🚧ContainProviding performance benefits by limiting calculations of layout.
🚧ContentReplacing an element with a generated value.
🟢CursorSetting the mouse cursor style.
🟢DirectionSetting the direction of text.
🚧DisplayControlling the element's inner and outer display types.
🚧FillSetting the color of an SVG shape.
🚧FilterApplying graphic effects to an element.
🚧FlexSetting how flex items grow or shrink.
🚧Flex BasisSetting the initial main size of a flex item.
🚧Flex DirectionSetting the direction of flex items.
🚧Flex GrowSetting how flex items grow.
🚧Flex ShrinkSetting how flex items shrink.
🚧Flex WrapSetting how flex items wrap.
🟢FloatPlacing an element on the left or right side of its container.
🚧FontSetting font properties of an element.
🟢Font FamilySetting the font for an element.
🚧Font Feature SettingsControling advanced typographic features in OpenType fonts.
🚧Font SizeSetting the font size of elements.
🚧Font SmoothingControlling the font smoothing of an element.
🚧Font StyleSetting font style of an element.
🚧Font Variant NumericControlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
🚧Font WeightSetting the weight of the font.
🚧GapSetting the gutters between rows and columns.
🚧GridSetting layout of grid system.
🚧Grid AreaSetting a size and location within a grid.
🚧Grid Auto ColumnsSetting the size of the grid columns.
🚧Grid Auto FlowControlling how auto-placed items get inserted in the grid.
🚧Grid Auto RowsSetting the size of the grid rows.
🚧Grid ColumnSetting a grid items's size and location in a grid layout.
🚧Grid ColumnsStyle utility for creating multiple grid columns.
🚧Grid RowSetting a grid items's size and location in a grid layout.
🚧Grid RowsStyle utility for creating multiple grid rows.
🚧Grid TemplateSetting grid columns, grid rows, and grid areas.
🚧Grid Template AreasSetting areas in the grid container
🚧Grid Template ColumnsCreating columns in a grid layout.
🚧Grid Template RowsCreating rows in a grid layout.
🚧HeightSetting an element’s height.
🚧InsetSetting distance between an element and the parent element.
🚧IsolationControlling whether an element should create a new stacking context.
🚧Justify ContentControlling how items are aligned along its main axis.
🚧Justify ItemsControlling how items are aligned along its inline axis.
🚧Justify SelfControlling how an individual item is aligned along its inline axis.
🚧Letter SpacingSetting the spacing between text characters.
🚧Line ClampLimiting the contents of a container to the specified number of lines.
🚧Line HeightSetting the height of a line box.
🚧List StyleSetting all the list style properties at once.
🚧List Style ImageReplacing the list item marker with an image.
🚧List Style PositionSetting the position of the list item marker.
🚧List Style TypeSetting the style of the list item marker.
🚧MarginSetting the margin area on all four sides of an element.
🚧Mask ImageSetting the image that is used as mask layer for an element.
🚧Max HeightSetting the maximum height of an element.
🚧Max SizeStyle shorthand for setting the max-width and max-height of an element.
🚧Max WidthSetting the maximum width of an element.
🚧Min HeightSetting the minimum height of an element.
🚧Min SizeStyle shorthand for setting the min-width and min-height of an element.
🚧Min WidthSetting the minimum width of an element.
🚧Mix Blend ModeSetting how an element's content should blend with its parent background.
🚧Object FitSetting how the content should be resized to fit its container.
🚧Object PositionSetting the alignment of the selected replaced element within the element's box.
🚧OpacitySetting the opacity of an element.
🚧OrderChanging the order of item in flex or grid container.
🚧OutlineSetting all the outline properties at once.
🚧Outline ColorSetting the color of an element’s outline.
🚧Outline OffsetSetting the spacing between an outline and the border of an element.
🚧Outline StyleSetting the style of an element's outline.
🚧Outline WidthSetting the thickness of an element's outline.
🚧OverflowControlling the desired behavior for an element's overflow.
🚧Overscroll BehaviorSetting what a browser does when reaching the boundary of a scrolling area.
🚧PaddingSetting the padding area on all four sides of an element.
🚧Place ContentSetting align-content and justify-content at the same time.
🚧Place ItemsSetting align-items and justify-items at the same time.
🚧Place SelfSetting align-self and justify-self at the same time.
🚧Pointer EventsSetting whether an element reacts to pointer events.
🚧PositionSetting an element is positioned in a document.
🚧ResizeSetting whether an element is resizable.
🚧Screen ReadersStyle utility for imporving the accessibility with screen readers.
🚧Scroll BehaviorSetting the scrolling behavior for a scrolling box.
🚧Scroll MarginSetting the scroll margin of an element.
🚧Scroll PaddingSetting the scroll padding of an element.
🚧Scroll Snap AlignSetting the scroll snap position.
🚧Scroll Snap StopSetting whether scroll container is pass over snap positions.
🚧Scroll Snap TypeSetting how strictly snap points are enforced on the scroll container.
🚧Shape Image ThresholdSetting the alpha channel threshold for a CSS shape.
🚧Shape MarginSetting a margin for a CSS shape.
🚧Shape OutsideSetting a shape around which adjacent inline content should wrap.
🚧SizeStyle shorthand for setting the width and height of an element.
🚧StrokeSetting the outline color of an SVG shape.
🚧Stroke WidthSetting the width of the stroke to be applied to the SVG shape.
🚧Text AlignSetting the text alignment of an element.
🚧Text DecorationSetting the appearance of decorative lines on text.
🚧Text Decoration ColorSetting the color of decorative lines on text.
🚧Text Decoration LineSetting the kind of decoration that is used on text.
🚧Text Decoration StyleSetting the style of the decoration line that is used on text.
🚧Text Decoration ThicknessSetting thickness of the decoration line.
🚧Text Fill ColorSetting the color of text.
🚧Text IndentSetting indentation of the first line.
🚧Text OrientationSetting orientation of the text characters in a line.
🚧Text OverflowHandling how hidden overflow content.
🚧Text RenderingSetting what to optimize when rendering text.
🚧Text ShadowAdding shadows to text.
🚧Text SizeStyle utility for setting the font size with a golden-ratio line height.
🚧Text StrokeSetting the width and color of strokes for text characters.
🚧Text Stroke ColorSetting the color of the stroke for text characters.
🚧Text Stroke WidthSetting the width of the stroke for text characters.
🟢Text TransformControlling capitalization of text.
🚧Text Underline OffsetSetting the distance of a text decoration line from its original position.
🚧Theme Service for ReactStandard CSS theme switching and service for Master CSS.
🚧Touch ActionSetting how an element's region can be manipulated by a touchscreen user.
🚧TransformControlling rotate, scale, skew, or translate an element.
🚧Transform BoxDefining the layout box to which transform and transform-origin properties relate.
🚧Transform OriginSetting the origin for an element’s transformations.
🚧Transform StyleSetting how children of an element are rendered in the 3D space.
🚧TransitionControlling animation speed when changing CSS properties.
🚧Transition DelaySetting a time to delay before starting transition.
🚧Transition DurationSetting the length of time a transition should takes to complete.
🚧Transition PropertySetting the CSS properties to which a transition effect should be applied.
🚧Transition Timing FunctionSetting speed curve of the transition effect.
🚧User DragControlling whether the user can drag element.
🚧User SelectControlling whether the user can select text.
🚧VariableCSS variables defined specific values to be reused throughout a document.
🚧Vertical AlignSetting vertical alignment.
🚧VisibilityControlling whether an element is visible.
🚧White SpaceControlling how whitespace and line breaks within an element are handled.
🚧WidthSetting an element’s width.
🚧Will ChangeSetting how an element is expected to change in the browser.
🚧Word BreakSetting whether words should break.
🚧Word SpacingSetting the spacing between words.
🚧Writing ModeSetting different writing mode.
🚧Z IndexSet the z-order of a positioned element.

🟢 Completed🚧 Unfinished⚪️ Planning

⚪️ Refactoring Master CSS Language Service

🚧 The detailed content is under planning.

🟠 Redesigning homepage

Redesign the homepage according to the features of v2.

🟢 New Master CSS ESLint

🎉 Released. Check out the Code Linting documentation.


How to keep track of the latest updates?
  • GitHub Releases - We've beautified the release changelog, which notes any version and package detailed changes.
  • Docs - Discord Channel - We'll post the latest documentation updates in the #docs channel in the Master discord server.
How to prevent version change conflicts?

When using a CDN in production, pining the current version to avoid potential conflicts due to version changes is strongly recommended, like so:

<script src="https://cdn.master.co/[email protected]"></script>
Where is the source code of the documentation?

The official documentation is now open source; welcome to contribute your expertise.