Начало работы с совершенно новым языком CSS

Виртуальный язык CSS с улучшенным синтаксисом. ~13 КБ

Посетите сайт css.master.co для получения полной документации.
Посетите наше сообщество для обсуждения.
Присоединяйтесь к нашему каналу discord.
Следите за нашим твиттером.

Содержание

Особенности
Зачем изучать CSS
Быстрый старт
Инструменты разработчика
Вдохновение
Связанные

На этой странице

Особенности
Зачем изучать CSS
Быстрый старт
Инструменты для разработчиков
Вдохновение
Похожие

Особенности

Давайте сделаем краткий обзор новаторских возможностей Master CSS:

🔥 Совершенно новый язык CSS вместо утилит/библиотек.
🔓 Записывайте свойства CSS, функции, селекторы и даже медиа-запросы прямо в class="...".
🧠 Автоматически генерировать соответствующие правила CSS на основе имен классов.
💖 Благодаря улучшенному синтаксису CSS вы можете создавать пользовательские интерфейсы с меньшим количеством кода.
⚡️ Прямое использование перформативного JIT в производстве. ~13KB
🧬 Улучшенный и структурированный синтаксис CSS для имен классов.
🌈 Предшественник подсветки синтаксиса для имен классов.
✨ Гибридный рендеринг, позволяющий предварительно генерировать CSS из HTML на стороне сервера, а затем продолжать использовать JIT на стороне клиента.
✨ Групповые стили, позволяющие извлекать одинаковые селекторы и стили медиазапросов и делать их короткими.
✨ Реактивные стили, позволяющие стилизовать элемент на основе состояния родителя/родственника.

Чтобы узнать больше, ознакомьтесь с документацией.

Зачем изучать CSS

Краткое введение начинается с понимания CSS, основанного на разметке.

😐 Традиционный

<style>
    .home-section {
        background-color: blue;
        padding: 2rem;
        text-align: center;
    }

    .home-section:hover {
        background-color: red;
    }

    @media (min-width: 1024px) {
        .home-section {
            padding: 3rem;
        }
    }
</style>

<section class="home-section">...</section>

Вход в полноэкранный режим Выход из полноэкранного режима

🤩 Теперь рефакторинг с помощью совершенно нового языка CSS, чтобы сделать его проще. ↓ 86% кода

<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>

Вход в полноэкранный режим Выйти из полноэкранного режима

Чтобы узнать больше, ознакомьтесь с документацией Why Master CSS.

Быстрый старт

Это руководство по быстрому запуску, ознакомьтесь с полным руководством по настройке для интеграции с вашими инструментами сборки и фреймворками.

npm install @master/css

Вход в полноэкранный режим Выход из полноэкранного режима

import '@master/css';

Войти в полноэкранный режим Выход из полноэкранного режима

или используйте CDN

<script src="https://cdn.master.co/css"></script>

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь приступайте к стилизации HTML с помощью Master CSS. 🎉

<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>

Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы узнать больше, ознакомьтесь с документацией по учебнику Syntax.

Инструменты разработчика

Master CSS Language Service — расширение Visual Studio Code для Master CSS. Обеспечивает завершение кода и подсветку синтаксиса.

Вдохновение

Некоторые наши основные концепции и дизайн вдохновлены этими гигантами.

Язык — Master — это язык, но изначально он был вдохновлен концепцией атомарных классов ACSS.
Virtual CSS — алгоритмы различий, виртуальные модели и т.д. вдохновлены Virtual DOM.

Связанные

@master/normal.css — Нормализация стилей браузера. ~1 КБ
@master/keyframes.css — Простые и полезные ключевые кадры CSS. ~0.4KB
@master/style-element.react — Быстрое создание стилизованных элементов React с условными именами классов. ~800B

Нажмите ⭐️ звезду на GitHub! Если вам это нравится.

Начало работы с совершенно новым языком CSS — Мастер CSS