Render css in html

css-render ·

Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.

It’s mainly built for library builders (who wants make their library work without css import at small overhead). It’s not recommend to use it in a webapp.

It is not designed to totally replace other style-related solutions, but to be a progressive tool which can just work as a supplementary of your style files or totally replace your .css files.

Docs

Why Using It

Comparasion with other CSS-in-JS framework

Main differences between css-render and styled-component, jss or emotion:

1. It doesn’t do the bindings between components and styles. It is more like a style generator with low level mount and unmount API.
2. It’s easier to write like a sass mixin or less mixin.

Examples

Realword Example

Basic Example

$ npm install --save-dev css-render

import CssRender from 'css-render' /** * CommonJS: * const < CssRender >= require('css-render') */ const  c > = CssRender() const style = c('body', ( props >) => ( margin: 0, backgroundColor: props.backgroundColor >), [ c('&.dark',  backgroundColor: 'black' >), c('.container',  width: '100%' >) ]) /** use it as string */ console.log(style.render( backgroundColor: 'white' >)) /** * or mount on document.head. (the following lines only work in the browser.) */ style.mount() // . style.unmount()

body < margin: 0; background-color: white; > body.dark < background-color: black; > body .container < width: 100%; >

BEM Plugin Example

$ npm install --save-dev css-render @css-render/plugin-bem

You can use bem plugin to generate bem CSS like this:

import CssRender from 'css-render' import bem from '@css-render/plugin-bem' /** * CommonJS: * const < CssRender >= require('css-render') * const < plugin: bem >= require('@css-render/plugin-bem') */ const cssr = CssRender() const plugin = bem( blockPrefix: '.c-' >) cssr.use(plugin) // bind the plugin with the cssr instance const  cB, cE, cM > = plugin const style = cB( 'container', [ cE( 'left, right',  width: '50%' > ), cM( 'dark', [ cE( 'left, right',  backgroundColor: 'black' > ) ] ) ] ) /** use it as string */ console.log(style.render()) /** * or mount on document.head * the following lines only works in browser, don't call them in node.js */ style.mount() // . style.unmount()

.c-container .c-container__left, .c-container .c-container__right < width: 50%; > .c-container.c-container--dark .c-container__left, .c-container.c-container--dark .c-container__right < background-color: black; >

Vue3 SSR

$ npm install --save-dev css-render @css-render/vue3-ssr

To make ssr works, you need to make

import  h, createSSRApp, defineComponent > from 'vue' import  renderToString > from '@vue/server-renderer' import  CssRender > from 'css-render' import  SsrContext, ssrAdapter > from '@css-render/vue3-ssr' const Child = defineComponent( setup ()  c('div',  color: 'red' >).mount( id: 'mount-id', // You need to pass the ssrAdapter to `mount` function // to make ssr work. // If you want it work with CSR, just set it to undefined ssr: ssrAdapter >) >, render ()  return 'Child' > >) const App = defineComponent( render ()  // Wrap the SsrContext at the root of your app return h(SsrContext, null,  default: () => h(Child) >) > >) const app = createSSRApp(App) renderToString(app).then(v =>  console.log(v) >)

Finally you will find the rendered SSR HTML includes mounted style.

Packages

Источник

CSS-in-JS и статический рендеринг

Все больше и больше разработчиков переходят на CSS-in-JS, включая такие громкие имена, как Microsoft, Atlassian и … конкурс песни Евровидение! И хотя я не всегда был большим поклонником CSS-in-JS, даже я признаю его преимущества:

Это позволяет вам легко обмениваться переменными между JavaScript и CSS (просто не забывайте разделять их).

Это благо для инструментов, облегчающих удаление мертвого кода и доставку минимально возможного количества CSS.

И самое главное, это поощряет написание CSS в композитном стиле.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Похоже, что CSS-in-JS будет доминировать в дизайне веб-приложений в обозримом будущем. Но веб-приложения составляют лишь небольшую часть Интернета, потому что контент по-прежнему остается королем.

Если вы разработчик React, высока вероятность того, что вы будете работать со статически визуализируемым веб-сайтом. И, как я обнаружил при создании create-react-blog и Frontend Armory, использование CSS-in-JS для статически визуализируемых сайтов по-прежнему сопровождается несколькими оговорками …

В чем разница между статическим и серверным рендерингом?

Избегайте мелькания неустановленного контента

Идея статического рендеринга заключается в том, чтобы ускорить сайт путем предварительной рендеринга HTML-кода для каждой страницы, который затем может быть отображен пользователям до завершения загрузки JavaScript. Конечно, с помощью CSS-in-JS ваши стили, в основном содержатся в JavaScript. И это создает проблему — исходный HTML-код не будет работать до завершения загрузки JavaScript.

К счастью, команды, поддерживающие styled-components и emotion, позволяют решить эту проблему с помощью небольшого дополнительного кода. Например, styled-components предоставляет объект ServerStyleSheet, который позволяет статически визуализировать стили одновременно со статической визуализацией HTML. Затем вы просто отправляете статически визуализированный тег style как часть HTML:

Предварительно выполнив рендеринг тега style и отправив его вместе с HTML, вы избежите появления нестандартного содержимого, но есть одна загвоздка. Поскольку ServerStyleSheet создает только стили для свойства initial, любое использование состояния компонента, componentDidMount или componentDidUpdate не будет отражено в стилях, представленных на сервере. Учитывая, что ваш предварительно визуализированный HTML имеет те же ограничения, это не должно быть проблемой. Но если вам нужна небольшая помощь в получении исходных данных для каждого из URL-адресов приложения, взгляните на Navi — маршрутизатор, созданный с учетом статического / серверного рендеринга. Но я отвлекся.

Статическое отображение стилей имеет еще одно преимущество: оно уменьшает количество CSS, которое требуется при начальной загрузке каждой страницы. Это связано с тем, что отображаемые теги style содержат только критический CSS, необходимый для предварительно обработанного HTML. Остальная часть CSS по-прежнему управляется с помощью JavaScript, что позволяет разделить его с помощью динамического import(). Это может быть очень важно для производительности … или может привести к тому, что многие мегабайты CSS будут недействительными при каждом обновлении — даже для обновлений, которые не затрагивают содержимое.

Встроенные и внешние таблицы стилей

Если вы посмотрите на сгенерированный тег style в приведенном выше примере, вы заметите, что он содержит атрибут data-styled. Это важно, потому что показывает, что styled-components привязаны к этому тегу style. Вы не можете надежно извлечь содержимое этого тега style в файл CSS, на который ссылается link. Что … может быть не такой уж большой проблемой?

Я имею в виду, почему вы все равно хотите поместить свои стили в отдельный файл?

Чтобы ответить на этот вопрос, рассмотрим основную причину статического рендеринга: он позволяет обслуживать JavaScript через CDN. Теперь, что касается ресурсов, обслуживаемых через CDN, они часто кэшируются со сроками истечения в далеком будущем. Таким образом, изменения в этих ресурсах требуют новых имен файлов, чтобы обойти кэш.

Естественно, изменения в именах файлов JavaScript потребуют соответствующих изменений в HTML, который ссылается на них. В результате HTML-файлы приложения не могут кэшироваться так же полно, как и теги style, встроенные в них. А благодаря дизайну Webpack изменения любого файла JavaScript в вашем проекте обычно требуют изменения каждого тега script и, следовательно, файла HTML в вашем приложении.

Источник

Как правильно подключить CSS к HTML

CSS – это таблица стилей. От нее зависит то, как будет выглядеть ваш сайт, цвета в оформлении, шрифты, расположение элементов и т.п. Поэтому обойтись без CSS при создании сайтов и веб-приложений не получится. Важно уметь правильно использовать этот инструмент в ходе разработки своего проекта.

Настраиваем стили в HTML

В HTML есть несколько глобальных тегов:

• – в него оборачивается вся страница.
• – в нем может храниться логика приложения или ссылка на отдельные скрипты.
• – блок, где можно прописать CSS-разметку.

В блоке вы можете использовать все существующие свойства CSS. Менять цвет отдельных элементов страницы, обращаться к селекторам и менять их размер, делать медиа-запросы для создания адаптивной верстки и выполнять массу других задач.

В коде это может выглядеть так:

 
Какой-то контент
 
Еще какой-то контент
  p < color: red; >.text

Мы применили CSS к странице. Дополнительно прикреплять стили к нашему сайту не нужно.

inline-стили

Необязательно прописывать стили в отдельном блоке. Можно вовсе не использовать тег . Можно использовать одноименный атрибут.

Атрибуты представляют собой параметры, указываемые в HTML-элементах. class или id являются атрибутами. Если вы захотите поменять стиль для блока div, то после его класса нужно написать style и поочередно указать стили в формате CSS. В реальном коде это может выглядеть так:

Мы указали свойство flex у div-элемента и поменяли цвет текста внутри на синий.

Такой подход очень удобен, если нужно быстро скорректировать дизайн какого-то элемента или в череде одинаковых блоков с контентом выделить конкретный и стилизовать иначе. Применив стиль к одному div, все остальные вы не затронете. Если нужно более широко настроить стили, то придется все-таки использовать блок или отдельный файл с CSS-разметкой.

Настраиваем стили в отдельном CSS-файле

Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React.

Подключение производится по-разному в зависимости от используемых технологий.

Стандартное подключение к HTML

Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.

HTML-файл автоматически соберет все стили из подключенного файла, опираясь на классы и другие параметры, указанные в разметке.

Подключение при помощи Webpack

Если в ходе разработки вы задействуете сборщик пакетов, то нужно зарегистрировать в нем специальный плагин. Например, css-loader, который преобразует все добавленные в него CSS-файлы в единый набор стилей, используемых в приложении.

Подключение к фреймворку React

В React используется стандарт ECMAScript2015. Для работы с CSS используется директива import.

Деление стилей на группы

Размещение стилей в отдельных CSS-файлах не только упрощает редактирование стилей и управление ими, но и позволяет не увеличивать количество кода в одном документе.

Чтобы это сделать, можно воспользоваться любым из описанных выше методов, но повторить его несколько раз. Например, написать директиву import несколько раз, указав разные адреса. Или же добавить в список метатегов дополнительные ссылки на CSS-документы.

Подключаем чужие CSS-стили

При желании чужие стили тоже можно использовать. В теге , например, вы указываете локальный адрес сайта, но можно туда вставить и ссылку.

Это может понадобиться в том случае, если вы хотите использовать нормализатор (специальный файл с CSS-кодом, который удаляет специфичные теги и свойства, пытаясь устранить все расхождения в работе разных браузеров).

Также внешние стили могут применяться с целью добавить единый стиль из какой-то общепринятой дизайн-системы (часто компонентной).

Другие способы

Некоторые фреймворки подразумевают использование CSS без CSS-файлов в их привычном виде. По такому принципу работает фреймворк TailwindCSS. Сразу после установки он автоматически становится доступен в приложении на глобальном уровне, а вам лишь остается использовать добавленные классы в любой части приложения без необходимости отдельно подключать CSS.

Также некоторые компонентные библиотеки, такие как Vue и Svelte, не требуют хранить стили в отдельной директории и двигают пользователя к использованию стилей внутри блоков .

Вместо заключения

CSS бывает разным, и в некоторых ситуациях лучше использовать внешние стили, а в некоторых – прописывать их прямо в тегах с HTML-элементами. Вы поймете с опытом, какой метод лучше, и сможете варьировать методики в зависимости от используемых технологий. Главное – писать корректный CSS-код.

Источник