Как подключить css к js

Распространенные способы подключения CSS в JavaScript-приложения

Каждый способ подключения CSS в приложениях React, Vue или Angular имеет свои преимущества и недостатки . Рассмотрим каждый из них более подробно.

Доступные варианты подключения

Рассмотрим некоторые из наиболее часто используемых методов подключения CSS в JavaScript.

Вариант 1: таблица стилей

Мы начнем с привычного подхода – ссылка на один общий файл CSS.

Но по мере того, как приложение становится больше и сложнее, поддерживать единую таблицу стилей будет все труднее. Sass и PostCSS помогут справиться с подобными проблемами.

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

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

Вариант 2: Модули CSS

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

Подобная автоматизация приводит к появлению автоматически сгенерированных имен классов, таких как header__2lexd. Часть в конце имени — это хешированный селектор, который является уникальным.

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

Представьте, что вы хотите использовать глобальный класс .screen-reader-text, который можно применить к любому компоненту приложения. При использовании CSS-модулей вам придется обратиться к псевдоселектору :global, который определяет размещенные внутри него стили как глобально доступные.

Пока вы импортируете файл CSS, который включает в себя блок объявления :global, в таблицу стилей компонента, вы будете использовать этот глобальный селектор.

Вот пример псевдоселектора :global в действии.

// typography.css :global < .aligncenter < text-align: center; >.alignright < text-align: right; >.alignleft < text-align: left; >>

А с помощью таких инструментов, как PostCSS Nested или Sass, вы можете импортировать шаблоны непосредственно в селектор.

// main.scss :global

Также обратите внимание на то, как мы ссылаемся на имена классов в узлах DOM. Нужно, чтобы имена отдельных документов для Vue, React и Angular говорили сами за себя. Вот небольшой пример того, как ссылки на классы используются в компоненте React.

// ./css/Button.css .btn < background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >> // ./Button.js import styles from "./css/Button.css"; const Button = () => ( > Click me! ); export default Button;

Модули CSS позволяют воспользоваться преимуществами стилей с заданной областью видимости без ущерба для производительности приложения.

Также модули CSS можно комбинировать с препроцессорами. Sass, Less, PostCSS могут быть интегрированы в процесс сборки с использованием модулей CSS.

Вариант 3: CSS in JS

Есть несколько пакетов, которые делают создание кода CSS-in-JS максимально безболезненным. JSS, Emotion и Styled Components — это лишь некоторые из них.

CSS-in-JS работает следующим образом. Вы пишете CSS-код, связанный с отдельным компонентом. Во время компиляции приложения используемая платформа выводит CSS-код только тех компонентов, которые постоянно отображаются на веб-странице.

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

При навигации пользователя по приложению стили невостребованных компонентов будут удалены из раздела . На их место будут добавлены стили входящих компонентов. Это повышает производительность приложения, позволяет обойтись без HTTP- запроса и не блокирует рендеринг. Также CSS-in-JS позволяет ссылаться на состояния компонентов и функции для рендеринга стилей CSS.

Основные аспекты использования данного подхода:

• Некоторые решения CSS-in-JS требуют, чтобы стили были встроены в элемент, который вы пытаетесь стилизовать. Для этого используется очень сложный синтаксис.
• CSS-in-JS предоставляет мощные инструменты, которые сложно реализовать с помощью модулей CSS или простой таблицы стилей.
• Нужно уметь использовать новейшие функции CSS, такие как вложенность и переменные.

Пример компонента React с использованием библиотеки Styled Components:

// ./Button.js import styled from 'styled-components'; const StyledButton= styled.button` background-color: blanchedalmond; font-size: 1.4rem; padding: 1rem 2rem; text-transform: uppercase; transition: background-color ease 300ms, border-color ease 300ms; &:hover < background-color: #000; color: #fff; >`; const Button = () => ( Click Me! ); export default Button;

Заключение

Есть несколько различных способов, позволяющих справиться с CSS-архитектурой в приложениях JavaScript. Но у каждого из них есть свои достоинства и свои недостатки.

Курсы javascript

Ребята подскажите как с помощью пользовательского скрипта (name.user.js) подключить к стороннему сайту свой css файл.

Желательно примерчик и по подробней.

25.12.2011, 23:52
Регистрация: 28.03.2011
Сообщений: 5,418

желательно было в гугле поискать перед записью на форум.

всё просто. создаём новый элемент, используя DOM, присваиваем ему значения атрибутов с помощью свойств, далее добавляем его на страницу

var $ = document; // shortcut var cssId = 'myCss'; // you could encode the css path itself to generate id.. var head = $.getElementsByTagName('head')[0]; var link = $.createElement('link'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'http://website.com/css/stylesheet.css'; link.media = 'all'; head.appendChild(link);

Подключение css в JS

Хочу применить css к тегам написанным в JS. В файл index.js подключаю css при помощи import ‘./style.css’ , в index.html подключаю JS при помощи . Запускаю в браузере index.html — пишет: Uncaught SyntaxError: Cannot use import statement outside a module (и указывает на строку import ‘./style.css’ в index.js). Как правильно подключить css в JS? index.html:

// import './style.css' const daysOfWeek = ['ПнВтСрЧтПтСбВс'] let year = new Date().getFullYear() // узнаем текущий год let date = new Date(year, 0, 1); // устанавливаем дату 1 января текущего года let dayOfWeek = date.getDay(); // узнаем день недели первого числа текущего года // получаем пустые в первой строке let firstStringEmpty = [] for (let i = 1; i `); > // получаем дни в первой строке let dayOfMonth = [] let number = 1 for (let i = dayOfWeek; i $ `) > let firstString = firstStringEmpty.concat(dayOfMonth) document.write(` 
январь $ $ $ 
`) 

.calendar < border: 1px solid #bbb; display: inline-block >.calendar table < empty-cells: hide; >.calendar caption < padding: 3px; background: linear-gradient(to bottom, #ddd 10%, #bbb); >.calendar td < padding: 2px 6px; text-align: center; border: 1px solid #ccc; background: linear-gradient(to bottom, #fff 10%, #ddd); border-radius: 0 0 3px >.calendar td:hover < border: 1px solid #888; >.calendar .holiday < background: linear-gradient(to bottom, #fff 10%, #ffc); >.calendar .today

const daysOfWeek = ['ПнВтСрЧтПтСбВс'] let year = new Date().getFullYear() // узнаем текущий год let date = new Date(year, 0, 1); // устанавливаем дату 1 января текущего года let dayOfWeek = date.getDay(); // узнаем день недели первого числа текущего года // получаем пустые в первой строке let firstStringEmpty = [] for (let i = 1; i `); > // получаем дни в первой строке let dayOfMonth = [] let number = 1 for (let i = dayOfWeek; i $ `) > let firstString = firstStringEmpty.concat(dayOfMonth) document.write(`
 январь $$ $ 
`)

.calendar < border: 1px solid #bbb; display: inline-block >.calendar table < empty-cells: hide; >.calendar caption < padding: 3px; background: linear-gradient(to bottom, #ddd 10%, #bbb); >.calendar td < padding: 2px 6px; text-align: center; border: 1px solid #ccc; background: linear-gradient(to bottom, #fff 10%, #ddd); border-radius: 0 0 3px >.calendar td:hover < border: 1px solid #888; >.calendar .holiday < background: linear-gradient(to bottom, #fff 10%, #ffc); >.calendar .today

#11 – Теги для подключения файлов

В HTML есть два тега, что позволяют выполнить подключение CSS и JavaScript файлов. В уроке мы с вами изучим работу с тегами: «link» и «script».

Видеоурок

Подключение стилей

HTML тег head существует для создания описания страницы, а также для подключения стилей и скриптов. Чтобы к странице подключить CSS стили требуется использовать специальный тег link , который дополнительно не требует закрывающего тега и выглядит следующим образом:

В атрибуте href необходимо указывать полный путь к CSS файлу. Также необходимо добавлять атрибуты rel и type для указания информации о том, что конкретно находится в подключаемом файле.

Добавление скриптов на сайт

Помимо стилей мы также можем подключать различные скрипты. Они помещаются в теге . В атрибуте src можно указать полный путь к файлу со скриптом или же вы можете прописать JavaScript внутри тега «script».

Важно также понимать, что некоторые скрипты не всегда нужны при загрузке страницы. По этой причине их загрузку можно отложить на самый конец. Чтобы это сделать необходимо добавить скрипты не вначале кода страницы (не в теге head), а в конце страницы перед закрывающим тегом body . Кстати, такая же схема не подходит для подключения стилей. Они всегда должны находиться в теге head .

Описание сайта в meta-тегах

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

К некоторым основным мета-тегам можно отнести такие: тег с описанием страницы, тег с ключевыми словами, тег с указанием кодировки сайта.

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

Весь код будет доступен после подписки на проект!