В каком порядке читаются файлы css при загрузке html страницы
В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
Необходимые знания: | Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.) |
---|---|
Задача: | Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS. |
Стилизация HTML-элементов
Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор p . Чтобы сделать все абзацы зелёными, вы должны использовать:
Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:
Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.
Группируйте их логически
Логически мы можем сгруппировать стили разными способами. В основном распространенными вариантами являются макет, типографика, блочная модель, визуальные свойства и другие.
Сочетание селекторов и комбинаторов
Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:
Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:
Это будет стиль любого элемента с классом special , который находится внутри
, который приходит сразу после , который находится внутри . Уф!
В оригинальном HTML, который мы предоставили, единственный элемент в стиле .
Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.
Стилизация элементов на основе их расположения в документе
Добавьте следующее правило в таблицу стилей.
Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите + (соседний братский комбинатор) между селекторами.
Попробуйте также добавить это правило в таблицу стилей:
Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.
Примечание: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.
Асинхронно загружаемые стили CSS тоже соблюдают очередность
Скажем, вы загружаете CSS при помощи специального загрузчика типа loadCSS. Что будет, если загрузить четвертый CSS файл с точно такими же настройками, как в запутанном примере выше?
На самом деле, нельзя вставлять теги link и style в тег body (хоть это и работает). Вероятность того, что загруженные при помощи loadCSS стили не сработают, крайне мала. Можно указать ID, чтобы контролировать порядок CSS:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Намеренно запутанный пример
Подсчет порядка свойств не ограничивается одной таблицей стилей. Последовательность подключения css-файлов в документе имеет даже большее значение.
Посмотрите на этот документ, в котором есть три отдельных…хм… давайте назовем их кусками стилей.
Куски расположились в
, внутри тега
или подключены при помощи @import
.module-baz background-color: pink;
>
Я подписал куски номерами 1, 2 и 3. Все они содержат CSS-селекторы с одинаковой специфичностью. №3 объявлен последним, потому стили, которые он содержит, применяться к странице.
Добавление CSS в наш документ
Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.
Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css . Расширение .css показывает, что это файл CSS.
Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри HTML документа:
Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.
Вы можете продолжить работу в styles.css локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.
С объективной точки зрения
Объективно, контроль порядка действительно является проблемой. Мы хотим навести порядок в хаосе. Так что это хорошая идея.
Использование конвенции может облегчить нашу работу. Если мы сможем найти что-то быстрее и уменьшим вероятность ошибок, мы, как разработчик, будем в выигрыше.
Хотя это и объективный раздел, я должен отметить, что это личное предпочтение. Все люди разные, и то, что подходит для меня не является окончательным решением для всех.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Я почти уверен, что, если в руководстве по стилю вашей команды есть раздел для этого, это будет полезно. Следовать этим правилам проще, независимо от того, какой подход вы выбрали. В популярном фреймворке вы найдете некоторый набор правил, и это одна из причин, почему их пример и исходный код выглядят так аккуратно.
Группировка по алфавиту или логически может сделать наш код более согласованным.
Что это?
CSS это хаотический язык. Он дает разработчику большую свободу, но у этого есть своя цена. Чтобы управлять сложным проектом таблиц стилей, вам нужна методология, которой нужно следовать.
То, в каком порядке в CSS объявляются свойства, не имеет значения. Вы можете написать любое свойство в любом порядке, и ваша таблица стилей будет работать как обычно.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Основная проблема здесь — случайность. Можем ли мы контролировать последовательность и сделать ее лучше для нас? Стоит ли тратить время и силы на это? Будет ли наш код лучше, если мы всегда будем писать объявления в определенном порядке? Ну, ответ — и да, и нет.
Стилизация элементов на основе состояния
Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:
В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?
Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.
Примечание: вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.
Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.
Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.
Добавление класса
Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.
В своём HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:
В вашем CSS вы можете выбрать класс special к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:
Сохраните и обновите, чтобы увидеть результат.
Вы можете захотеть, чтобы в абзаце также был оранжевым и жирным. Попробуйте добавить класс " special" , затем перезагрузите страницу и посмотрите, что получится.
Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:
Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:
Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.
Странные расширения
Расширения в препроцессорах ведут себя странно. К примеру, вы хотите по-разному стилизовать элемент:
Старший аспирант «Нетологии» Алёна Батицкая перевела статью Криса Койера Precedence in CSS (When Order of CSS Matters) о приоритетности в CSS.
В обычный день, когда вы пишете CSS, вы вряд ли задумываетесь о приоритетности. Это и не нужно! Вам придется вспомнить об этом ровно в тот момент, когда у вас случится совпадение селекторов с одинаковой специфичностью.
Специфичность подразумевает, что порядок имеет значение. Стили, расположенные ниже по каскаду, выигрывают.
2 ответа 2
Почему модель css вверху, js внизу более привлекательная?
Тут важный момент это то, что браузер загружает страницу сверху вниз
Сценарий №1
Есть страница на которой скрипты и стили вверху
Примерный сценарий ее загрузки будет такой:
- Загрузка стилей
- Загрузка скриптов
- Загрузка остальной разметки
В данном сценарии есть недостаток, до момента отображения непосредственно контента страницы браузер должен загрузить стили и скрипты, что дает довольно большую задержку если это крупный ресурс.
Сценарий №2
Есть страница на которой стили вверху, а скрипты перед закрывающим тегом body
Примерный сценарий ее загрузки будет такой:
- Загрузка стилей
- Загрузка разметки
- Загрузка скриптов
В данном сценарии есть преимущества по сравнению с первым, до момента отображения непосредственно контента страницы браузер должен загрузить только стили, а скрипты он загрузит в последнюю очередь, что позволяет пользователю быстрее увидеть содержимое страницы.
Почему стили стоит оставлять вверху? Если стили также как и скрипты перенести вниз страницы то разметка после загрузки будет не стилизована, что будет выглядеть довольно некрасиво до момента загрузки стилей.
С моей личной точки зрения
Мне нравится случайный порядок. У меня всегда в голове вопрос: должен ли я использовать какой-то метод для организации своего кода? Я пробовал как по алфавиту, так и по группам, но не придерживался ни того, ни другого.
В некоторых случаях мы все пишем упорядоченный CSS, думаем о сокращениях и тех свойствах, в которых мы устанавливаем значения для четырех направлений ( margin: top right bottom left;). Мы выучили направление по часовой стрелке, и в основном следуем этому, когда устанавливаем позицию следующим образом:
Здесь порядок не имеет значения, но я тоже следую ему. Для меня еще одним примером является свойство content. Если я использую его, то всегда добавляю в начало блока.
Эта часть написания лучшего кода не так важна для меня. Я понимаю, почему это может быть полезно, но в современных условиях, я думаю, в большинстве случаев это не нужно.
При алфавитном порядке когнитивная нагрузка невелика, все сразу это понимают, и вы легко можете избежать ошибок дублирования.
В логических группах для меня код кажется естественным; для меня это более подходящий метод, и я думаю, что он также лучше всего подходит для CSS.
В обоих случаях у вас нет проблем с тем, куда писать код (вы не добавляете его просто в конец блока).
Я не думаю, что использование одного из этих методов поможет вам в поиске конкретной строки. В современных средах IDE смехотворно легко выделить или исследовать что-то. Для разработчика среднего уровня, который ежедневно просматривает код, это не проблема.
Если вы хотите получить более качественный и чистый код, лучшее решение — использовать правильно настроенный линтер; это поможет в проверке системы и в исправлении «ошибок» на основе руководства по стилю кодирования. Я думаю, что все методы в какой-то мере являются случайными.
Странный критический CSS
Есть причина, из-за которой вам может понадобиться loadCSS. Может возникнуть ситуация, когда вам понадобится намеренно отложить загрузку стилей из-за вставки критического CSS кода в head, чтобы эти стили попали в первый пакет и ускорили отрисовку страницы.
Необходимо точно решить, какие стили перенести в критические, а какие нет, чтобы избежать странных мерцаний при смене стилей.
Наследование доставит проблемы?
В препроцессорах да, может.
Предположим, вы хотите стилизовать элемент с вариациями:
И код препроцессора будет следующим (максимально упрощен для наглядности:
%variation background: orange;
>
.module-variation @extend %variation;
>
Вы думаете: ОК, .module-variation идет ПОСЛЕДНИМ в списке селекторов, поэтому он выигрывает и цвет фона должен быть оранжевым. Но это не так, поскольку наследование (extend) передвигает селектор туда, где это наследование объявляется. В нашем случае это место прямо перед тем кодом, который мы пытаемся переопределить. Скомпилированный CSS выглядит так:
.module-variation background: orange;
>
Нативное наследование, когда оно наконец появится, скорее всего будет менее запутанным.
Изменение поведения элементов по умолчанию
Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
-
— неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:
Попробуйте добавить это в свой CSS сейчас.
Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.
Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение square .
Алфавитный порядок
Использование алфавита упорядочивает ваши свойства — как вы уже догадались — на основе алфавита.
Начнём с HTML
Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как index.html в папке на вашем компьютере.
Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.
В одном файле стилей
К примеру, у нас есть HTML код:
Порядок атрибутов в HTML не играет никакой роли, а вот порядок в стилях очень важен. Разберем свойство background:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Stylelint и CSSComb
Если вы хотите сделать более понятный CSS, начните с этого. Как я уже упоминал, чтобы сделать лучший код — с меньшим количеством ошибок — нам нужно использовать линтер. Используя их, мы можем легко установить стандарты кода.
Наиболее продвинутым и популярным на сегодняшний день является Stylelint, фантастический инструмент с отличными возможностями. Для получения дополнительной информации посетите их официальный сайт. В VS Code мы можем легко его настроить — как другие линтеры.
CSSComb — более старый инструмент, и это не линтер, а органайзер кода. Запустив его, вы можете проработать код на основе предопределенных правил. Мы также можем легко настроить его в VS Code.
От автора: обычно когда вы пишите стили, вы даже не задумываетесь об очередности в CSS. Соблюдение очередности не самая приоритетная задача, но все же она имеет значение! Очередность работает, когда есть одинаковые селекторы и элементы с одинаковой специфичностью. Если специфичность полностью совпадает, то порядок стилей имеет значение. Применяются более поздние стили.
Глупо этим управлять
Никто не хочет об этом думать. Выигрыш стилей при помощи специфичности кажется более простым. Но знать об этом нужно, потому что накручивать бесполезную и необязательную специфичность тоже обломно.
Как, всё-таки, правильно подключать стили и js файлы?
Во многих источниках указано, что наиболее верным является такой способ: css в начале(в head), а js в конце, перед закрытием . Но когда я смотрю на крупнейших ресурсах как это сделано, то получается везде по-разному, а ведь, как я понимаю, крупнейшие ресурсы заботятся о скорости загрузки сайта в первую очередь. Кто-то всё размещает в head, кто-то и так, и сяк.
Или тут есть какие-то "подводные камни" на которые стоит обратить внимание? Просто весьма интересно. Сам всегда размещаю css в начале, а все js в конце.
Крупнейшие ресурсы проверяли на скорость? Действительно все быстрые? Просто интересно, не подумайте ничего. Парочку как-то проверяла, а там о скорости и речи нет.
Завершение
В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.
От автора: написание правильного CSS часто является сложной задачей, но это то, что в определенный момент может потребоваться любому разработчику. Порядок свойств в CSS является постоянным вопросом, который беспокоит большинство из нас. Важно ли это? Получим ли мы что-то, если уделим этому внимание?
Ответ на эти вопросы неоднозначен. Поскольку я читаю все больше и больше на эту тему, я нашел много мнений по этому поводу. Некоторым это небезразлично, а другим — нет, поэтому трудно найти объективную точку зрения.
Самый простой способ — подойти к этой концепции с личной точки зрения. Я попытаюсь продемонстрировать это как с объективной, так и с субъективной точки зрения, и я надеюсь, это мне удастся.
В пределах одной таблицы стилей
Предположим, у нас есть HTML-разметка:
Порядок атрибутов в HTML значения не имеет. Все дело в порядке внутри таблицы стилей. Давайте посмотрим внимательнее на background:
/*
У всех селекторов ниже одинаковая специфичность
*/
.module-foo background: orange;
>
/* Объявлен ПОСЛЕДНИМ, выигрывает это свойство/значение */
.module-bar background: lightblue; /* Я выйграл! */
>
Специально запутанный пример
Порядок не ограничивается только одним объявлением стилей. Еще более важен порядок объявления стилей в документе.
Обратите внимание на документ ниже с тремя разными объявлениями стилей. Назовем их кусочками. Эти кусочки — это , блок style и @import.
Случайный порядок
Для тех, кто любит писать свои стили в случайном порядке. Не следовать правилам — это все равно правило. Эта концепция является той, которая обычно вызывает дискуссии.
Асинхронная загрузка CSS так же учитывает порядок документов
Возможно, вы загружаете CSS при помощи чудесного подгрузчика наподобие loadCSS. Что произойдет, если мы захотим загрузить четвертый CSS-файл? С настройками, которые совпадут с одним из подключенных файлов в нашем извилистом примере. loadCSS по умолчанию подключит таблицу стилей в самый конец шапки сайта (перед . Новый файл станет третьим по порядку, а @import — соответственно четвертым. И все равно выиграет!
Вообще-то код, в котором или расположены внутри , будет считаться невалидным. Хотя и будет работать. Поэтому стили, загруженные при помощи loadCSS чаще всего будут выигрывать.
После окончания верстки принято проверять ее при помощи валидатора. Это поможет быстро найти и устранить ошибки. Проверка производится согласно с текущей спецификацией HTML/CSS.
Помимо этого вы можете указать специальный ID для контроля порядка загрузки CSS:
// загрузить CSS-файл прямо перед элементом, содержащим следующий код
loadCSS(«path/to/mystylesheet.css», document.getElementById(«loadcss»));
Критичный CSS может создать проблему?
Одна из причин, по которой вы используете loadCSS — намеренная попытка отложить загрузку ваших таблиц стилей, поскольку вы используете критичный CSS внутри . Этот прием помогает подгрузить стили в первых пакетах и ускорить время отрисовки страницы.
Практика критичного CSS предполагает перемещение CSS-селекторов на более высокую (в коде) позицию. В кусок №1. В часть с более низким приоритетом и, как следствие, простую для переопределения. Поэтому, теоретически, да, могут возникнуть конфликты/изменения между этапами, когда на странице загрузился только критичный CSS и когда весь CSS загрузился и примерился к содержимому страницы. Но таблицы стилей загрузятся полностью и будут находится ниже по коду относительно критичного CSS, так что в конечном итоге вы получите то, чего ожидали.
Доступные методы
Существует бесконечное количество доступных методов для сокращения свойств, потому что мы все можем создавать собственные варианты, которые хорошо подходят для нашей команды или для нас. Помимо этого, есть три понятия.
Читайте также: