Javascript и css: CSS и JavaScript доступность — лучшие практики — Изучение веб-разработки

Leave a Comment / Css / By /

Объединение JavaScript и CSS в одном файле / Хабр

enej

Время на прочтение 2 мин

Количество просмотров

12K

Разработка веб-сайтов *

Перевод

Автор оригинала: Shiva

Если Вы работали над оптимизацией загрузки страницы, Вы знаете, насколько дорогостоящая каждая загрузка ресурса. Чем больше число внешних ресурсов, к которым Вы обращаетесь, тем больше время требуется для загрузки страницы.
Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JS и следовательно подвергаются многим загрузкам ресурса. Совет от гуру оптимизации в необходимости объединить все файлы CSS и все до одного файлы JS, чтобы уменьшить число ресурсов до двух. Это, без сомнения, поможет сократить время загрузки страницы.


Если Вы все же считаете что эти две загрузки не являются лучшим решениям, я с Вами соглашусь. В этой статье мы рассмотрим способ объединения CSS с JS и сведем количество загрузок к одной. Я обнаружил этот способ, отчаянно пытаясь оптимизировать страницы в Microsoft Office Live

Техника основана на том как CSS и анализатор JS ведут себя в IE и Firefox.
• Когда анализатор CSS сталкивается с символом комментария HTML (<!—) в содержании CSS, символ игнорируется.
• Когда анализатор JS сталкивается с символом комментария HTML (<!—) в содержании JS, символ рассматривают подобный комментарию линии (//), и следовательно остальная часть строки после символа комментария HTML игнорируется

Рассмотрим на примере

<!— /*
function t(){}
<!— */
<!— body { background-color: Aqua; }

Когда анализатор CSS будет разбирать вышеупомянутое код, символы комментария HTML будут пропущенны, и код станет эквивалентным коду ниже…

/*
function t(){}
*/
body { background-color: Aqua; }

Как Вы видите, анализатор CSS видит только код CSS, а код скрипта закомментирован (/*… */).

Когда анализатор JS станет разбирать код, символы комментария HTML будут интерпретированы в комментарии строки (//), и следовательно код станет таким…

// /*
function t(){}
// */
// body { background-color: Aqua; }

Как Вы видите анализатор JS видет только код скрипта, а все остальное закоментрованно.

Что бы ссылаться на этот ресурс можно использовать теги SCRIPT и LINK в вашей страницы. Например:

<link type=«text/css» rel=«stylesheet» href=«test.jscss» />
<script type=«text/javascript» language=«javascript» src=«test.jscss»>&lt/script>

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

И на последок, есть еще одна вещь, о которой Вы должны заботиться — content type ответа — необходимо ставить */* чтобы дать подтверждение Firefox, что содержание может быть обработано как что-либо подходящее.

Теги:

  • JavaScript
  • CSS

Хабы:

  • Разработка веб-сайтов

Всего голосов 42: ↑30 и ↓12 +18

Комментарии 93

Паша @enej

Пользователь

Комментарии Комментарии 93

Что такое CSS-in-JS и чем отличается от обычного CSS

Стилизация страниц всегда происходит с помощью CSS. В веб-разработке принято разделять HTML и CSS файлы, подключая их друг к другу. Стилизация с использованием JavaScript (JS) в стандартных ситуациях происходит в тех случаях, когда требуется прописать изменение стилей при определенных условиях взаимодействия. Например, пользователь нажал на кнопку и появился какой-нибудь дополнительный блок, который по умолчанию скрыт. Подход CSS-in-JS предполагает вместо стандартных CSS-файлов со стилями использовать скриптовые файлы, где будут также прописываться стили.

Далее разберемся, какие особенности есть у подхода CSS-in-JS, когда он оправдан.

Различия CSS и JavaScript

Они очевидны:

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

Связка CSS и JavaScript позволяет добиться интерактивности и удобства пользовательского интерфейса.

Что такое CSS-in-JS

CSS-in-JS иногда еще называют JSS, хотя это название отдельной библиотеки, а не технологии. Главная особенность заключается не только в том, что стилизация происходит в скриптовых файлах с расширением .js, но и в том, что сам язык JavaScript используется для описания стилей в удобном и декларативном виде. Подобный подход реализован во многих популярных библиотеках и фреймворках. Например, в React большая часть работы происходит со styled-components – это элементы CSS-in-JS.

Вот пример использования такого компонента:

// Create a <Title> react component that renders an <h2> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h2`
   font-size: 1.5em;
   text-align: center;
   color: palevioletred;
`;

Здесь создается заголовок h2 на основе данных, содержащихся внутри тега <title>. К нему сразу же задаются стили, которые будут меняться в зависимости от определенных условий.

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

Преимущества CSS-in-JS

У этой технологии есть собственный перечень весомых преимуществ:

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

Файловая структура при задании стилей через обычный CSS

  • Активно используются возможности JavaScript. Это значит, что вам будет значительно проще задавать условия изменения стилей, делая интерфейс более интерактивным.
  • Можно менять стандартную логику CSS.
     Простой пример: свойства, которые не заданы явно, наследуются от родительского элемента. Иногда это мешает процессу верстки. Благодаря тому, что в CSS-in-JS можно задавать свои правила, вы можете изолировать как группу элементов, так и вообще весь документ, отключив для них наследование свойств родителя.
  • Селекторам можно ограничить область видимости. Проблема с уникальными именами (они же селекторы) возникает в любом более-менее сложном проекте и/или в ситуациях, когда к проекту требуется добавить большой сторонний код. Происходит коллизия селекторов, из-за чего стили перестают отображаться корректно. В JSS можно настроить автоматическую генерацию уникальных названий селекторов или просто ограничить область видимости, благодаря чему даже если в документе и будет два одинаковых селектора, то в конфликт друг с другом они вступать не будут.
  • Префиксы больше не нужны. В стандартном CSS для того, чтобы некоторые свойства корректно отображались в том или ином браузере им требуется задавать определенные префиксы.
    Мало того, что разработчику нужно знать, поддерживается ли то или иное свойство без префикса, так их еще нужно вставлять в код, увеличивая его размер и тратя дополнительное время. В CSS-in-JS расстановка нужных префиксов происходит автоматически.
  • Отличная совместимость как JS, так и CSS свойств между собой. Помимо простых свойств полностью совместимы константы и функции. Плюс, они еще и взаимозаменяемы.
  • В DOM попадают только стили, использующиеся у отображенных в данный момент на экране элементов. Это уменьшает время, необходимое для загрузки страницы и вообще сильно облегчает ее.
  • Есть возможность тестировать работоспособность CSS в виде модулей, в том числе изолированных.
    Такой подход позволяет оперативнее обнаружить ошибки и исправить их с минимальным риском вызвать появление других ошибок.

Недостатки CSS-in-JS

Основная их масса связана в первую очередь с необходимостью обучения и формированием нестандартного подхода к разработке:

  • Требуется освоить новый подход. Знать по отдельность CSS и JavaScript будет недостаточно, хотя это поможет в освоении. Основная проблема в том, что чистый подход CSS-in-JS практически не используется в разработке, а только вкупе со сторонними библиотеками или фреймворками, поэтому изучать желательно их.
  • Придется привыкать к новым зависимостям и логике. Они отличаются от стандартного CSS. Сделано это для упрощения разработке, однако быстро адаптироваться к изменению базовых принципов получается далеко не у всех разработчиков.

Пример записи кода формата CSS-in-JS

  • Потребуется изучать дополнительные библиотеки и фреймворки. Так как CSS-in-JS не используется в отрыве от сторонних инструментов, то для эффективной работы придется осваивать и их. Хотя бы на базовом уровне.
  • Скрипты, разметку и стилизацию придется вести в одном файле. С одной стороны это может упростить процесс написания кода, так как не требуется создания кучи вспомогательных файлов под разные задачи, но с другой стороны код, сваленный в один файл вызывает множество неудобств.

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

Когда использовать CSS, а когда JSS

При всех своих преимуществах, CSS-in-JS далеко не всегда рекомендуется использовать. Вот перечень типов проектов, использование в которых JSS оправдано:

  • Разработка ведется с использованием динамических библиотек и фреймворков, например, React, Vue, JSS (это еще и библиотека) и подобных. Вся логика работы с этими инструментами строится на использовании подхода CSS-in-JavaScript, поэтому работать с ним будет необходимо в любом случае.

Пример кода из React

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

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

Популярные мифы и заблуждения

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

Заблуждение 1: Только CSS-in-JS способен корректно решить проблему конфликта имен и стилей

Нет, не только он, хотя эта особенность и является одним из его весомых преимуществ. Однако это далеко не безальтернативный вариант – есть CSS Modules, Shadow DOM, соглашения по наименованиям BEM, различные соглашения внутри команды разработчиков. Да, их использование не всегда удобно, так как иногда требуется отдельное подключение и настройка, но альтернатива styled-components все равно есть.

Заблуждение 2: styled-components позволяют получать более компактный код

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

Пример записи styled-components

Заблуждение 3: Упрощается расширение стилей

Только в случаях, когда расширение носит серьезной и глобальный характер. Вот пример с кнопкой:

const Button = styled.button`
   padding: 10px;
`;
const TomatoButton = Button.extend`
color: #f00;
`;

Так выглядит код в JSS. Здесь добавляется цвет для кнопки. Но вот такой же код в классическом CSS:

button {
   padding: 10px;
}
button. tomato-button {
   color: #f00;
}

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

Заблуждение 4: Улучшается организация кода

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

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

Заблуждение 5: Процесс разработки очень удобен

Нужно только к нему приноровиться. Возможно, тем, кто работает преимущественно с фреймворками и разными вспомогательными библиотеками процесс разработки действительно покажется более удобным. Однако для тех, кто привык к классической верстке сразу становятся заметны несколько проблем:

  • Любая ошибка в стилях приводит к невозможности корректной работы всего приложения или сайта. Системное сообщение об ошибке часто в таких ситуациях очень длинное и не очень понятное – не сразу можно догадаться, что проблема в стилях. В CSS же ошибка в стиле приведет к неправильному отображению элемента, в стилях которого была допущена ошибка, но не более. Плюс, по этому элементу и его поведению будет очень легко вычислить в какой части кода была допущена ошибка.
  • В CSS у каждого элемента легко отследить className. При использовании же styled-components такой возможности нет, поэтому придется постоянно переключаться между React element tree и DevTools DOM tree.

Заблуждение 6: Ускоряется работа приложения

Это не так и вот почему:

  • Чтобы styled-components отобразились в браузере они должны быть изначально добавлены в DOM и только оттуда выведены в браузере. Это дополнительное время, пускай и занимающее доли секунды. Также это усложнение общей цепочки, что повышает риск некорректного выведения, так как на этом из этапов цепи может произойти ошибка.
  • Так как скрипты, стили и разметка находятся в одном файле, то их кеширование будет занимать больше времени, следовательно, при первом посещении страница будет грузиться дольше.
  • Анимация возможна только через keyframes.

Заключение

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

Разница между CSS и JavaScript

Улучшить статью

Сохранить статью

Нравится Статья

  • Последнее обновление: 12 июн, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

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

    CSS: CSS расшифровывается как Каскадная таблица стилей , это язык таблицы стилей, используемый для формирования элементов HTML, которые будут отображаться в браузерах как веб-страница. Без использования CSS веб-сайт, созданный с использованием HTML, будет выглядеть скучно. В основном CSS обеспечивает внешнюю оболочку для любых элементов HTML. Если вы рассматриваете HTML как скелет веб-страницы, то CSS будет оболочкой скелета. Тип Интернет-медиа (тип MIME) CSS — text/CSS.

    Особенности CSS:  

    • CSS совместим со всеми устройствами.
    • С помощью CSS обслуживание веб-сайта становится проще и быстрее.
    • CSS поддерживает последовательные и спонтанные изменения.
    • CSS ускоряет работу веб-сайта и расширяет возможности поисковых систем по сканированию веб-страниц.
    • Обладает особой особенностью — возможностью изменять положение.

    JavaScript: Это легкий, кроссплатформенный и интерпретируемый язык сценариев. Он хорошо известен разработкой веб-страниц, его также используют многие небраузерные среды. JavaScript можно использовать как для разработки на стороне клиента, так и для разработки на стороне сервера. JavaScript содержит стандартную библиотеку объектов, таких как Array, Date и Math, а также основной набор языковых элементов, таких как операторы, управляющие структуры и операторы. JavaScript можно использовать как Клиентская сторона , а также Серверная сторона .

    Особенности JavaScript:  

    • JavaScript был создан в первую очередь для манипулирования DOM. Ранее веб-сайты были в основном статичными, после JavaScript были созданы динамические веб-сайты.
    • Функции в JS являются объектами. Они могут иметь свойства и методы, как и любой другой объект. Их можно передавать в качестве аргументов в другие функции.
    • Может обрабатывать дату и время.
    • Выполняет проверку формы, хотя формы создаются с использованием HTML.
    • Компилятор не требуется.

    Разница между CSS и JavaScript:  

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