Сколько css файлов можно подключить к html странице: Сколько можно подключать js и css? — Хабр Q&A

Drupal 8: Объявление библиотеки

Для того чтобы объявить библиотеку, добавьте файл *.libraries.yml в корне вашего модуля или темы (рядом с .info.yml файлом). Например, если ваш модуль называется foo, то файл должен иметь название foo.libraries.yml.

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

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {}
    theme:
      css/cuddly-slider-theme.css: {}
  js:
    js/cuddly-slider.js: {}

Вы можете обратить внимание на то, что у стилей есть дополнительные вложения в виде layout и theme, который отсутствуют у JS. Эти вложения обозначают какого типа данные стили.

Данные типы влияют на вес файлов при их подключении и всего их присутствует 5 уровней:

• base: CSS reset, нормалайзы, оформление HTML элементов. Назначается вес CSS_BASE = -200.
• layout: Структура страницы, например подключение различных сеток. Назначается вес CSS_LAYOUT = -100.
• component: Переиспользуемые элементы интерфейса. Назначается вес CSS_COMPONENT = 0.
• state: Стили, которые отображает различные состояния компонентов. Назначается вес CSS_STATE = 100.
• theme: Оформление компонентов. Назначается вес CSS_THEME = 200.

Данные уровни являются частью SMACSS стандарта. Вы не можете добавлять новые ключи.

Пример выше предполагает что JavaScript файл cuddy-slider.js находится в папке js вашего модуля или темы. Если вам необходимо подключить библиотеку относительно корня Drupal ядра, путь должен начинаться с /. Библиотека будет называться cuddly-slider.

Заметка

Используя Drush, вы можете сгенерировать заготовку для библиотеки, как для модуля, так и для темы используя команды: drush generate module-libraries, drush generate theme-libraries, drush generate yml-module-libraries, drush generate yml-theme-libraries.

¶Подключение зависимостей

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

Для этого вам потребуется знать название библиотеки, и модуль или тему, которая его объявляет. Зависимости указываются в формате [module-theme-name]/[library-name]. Зависимости указываются в разделе dependencies конкретной библиотеки.

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {}
    theme:
      css/cuddly-slider-theme.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

В дальнейшем, другие библиотеки также смогут использовать вашу библиотеку [module-theme-name]/cuddly-slider в качестве зависимости.

¶Свойства ассетов

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

¶attributes

• Применимо: CSS и JS

Позволяет задать атрибуты к тегу подключения.

Например:

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {
        attributes: {
          crossorigin: anonymous
        }
      }

В результате добавит на страницу:

<link rel="stylesheet" href="/modules/custom/MODULENAME/css/cuddly-slider-layout.css" crossorigin="anonymous">

¶browsers

• Применимо: CSS и JS

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

Например:

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {
        browsers: {
          IE: 'lte IE 9'
          '!IE': false
        }
      }

В результате добавит на страницу:

<!--[if lte IE 9]>
<script src="/modules/custom/MODULENAME/css/cuddly-slider-layout.css"></script>
<![endif]-->

¶media

• Применимо: CSS
• По умолчанию: all

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

Например:

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {
        media: print
      }

В результате добавит на страницу:

<link rel="stylesheet" href="/modules/custom/MODULENAME/css/cuddly-slider-layout.css" media="print">

¶minified

• Применимо: CSS и JS
• По умолчанию: false

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

Например:

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {
        minified: true
      }

¶preprocess

• Применимо: CSS и JS
• По умолчанию: true

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

¶weight

• Применимо: CSS и JS
• По умолчанию: 0

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

Заметка

weight не может принимать положительные значения. Это означает, что максимально допустимый вес равен 0.

¶Ссылки

Введение в Chrome DevTools. Console, Sources, Network — Блог HTML Academy

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

Вкладка Console

В консоли отображается информация об ошибках в коде, а ещё туда можно ввести команду, и она выполнится. Если на странице не подгрузились шрифты, картинки или стили, то сообщения об ошибках выводятся именно сюда. Справа в верхнем углу DevTools выведутся иконки-предупреждения, которые откроют окно консоли.

Вкладка Sources

Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.

Например, так выглядит минифицированный CSS-файл на вкладке Sources.

Чтобы посмотреть файл в более привычном виде, нажмите на иконку с фигурными скобками внизу окна:

Вкладка Network

С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.

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

Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.

Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.

Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.

В левом нижнем углу — информация о количестве запросов, трафике и времени загрузки. Ещё мы можем выбрать скорость соединения и проверить, как сайт работает на мобильном где-нибудь за городом.

Проверка вёрстки на мобильных

Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.

Это незаменимый инструмент в работе над адаптивной вёрсткой.

Скриншоты страниц

Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.

Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.

На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.

DevTools — инструмент разработчика

Но сила не в инструментах, а в голове. Познакомьтесь с вёрсткой бесплатно прямо сейчас.

Попробовать

Используя Bootstrap и мой собственный CSS вместе

Я знаю базовый CSS, но у меня нет опыта.
Я хочу использовать файл bootstrap CSS, но я также хочу добавить свои собственные коды стилей. Что я должен сделать для этого?
Должен ли я сначала добавить стили Bootstrap, а затем свой? Это лучший способ?

css

twitter-bootstrap

Поделиться

Источник

ahgk    

29 октября 2014 в 20:40

5 ответов

• Создайте свой собственный шаблон сайта Google, используя мой собственный CSS

  Есть ли способ создать свой собственный сайт Google, используя мой собственный код CSS? Я пробовал поставить <style> , но google мне этого не позволяет. Я могу использовать несколько встроенных CSS, но я заметил, что некоторые CSS тоже не разрешены. например position:absolute; Я спрашиваю об…

• Как иметь свой собственный style.css и bootstrap одновременно?

  Итак, я только что вошел в Bootstrap и хочу использовать Bootstrap и использовать свой собственный CSS для вещей, которые я хочу заново прикоснуться к себе. Прямо сейчас все так: <link rel=stylesheet href=css/bootstrap.css> Но когда я переопределяю таблицу стилей на style.css (мой файл css),…

23

У вас будет такой порядок таблиц стилей, сначала вы включите bootstrap css, а затем файл таблицы стилей. Почему это? Потому что таким образом вы можете перезаписать классы из фреймворка без использования !важно. Вы можете написать свои собственные классы и включить их в свой макет, вы можете использовать классы начальной загрузки и вносить в них изменения по мере необходимости. Когда вы смешиваете свои классы и классы начальной загрузки, проверьте, какие атрибуты добавляются из их классов, нужны ли они вам или нет и т. Д…

Пример

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  /* Your external css file will go here. This is just for testing :) */
  
.mycustombtn{
  background: #000;
}

</style>  


<button type="button">Danger</button>

Поделиться

Bojan Petkovski    

29 октября 2014 в 20:56

11

Вы можете использовать Bootstrap с вашим css, просто сделайте это (в вашем теге head):

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />

<!-- Your file css -->
<link rel="stylesheet" href="your-file-css.css" />

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

Помните, что всегда ставьте ссылку на bootstrap перед ссылкой на ваш файл css.

Извините за мой английский

Поделиться

Omar Enrico Polo    

29 октября 2014 в 20:48

3

Это выглядело бы примерно так:

<head>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="yourstyle.css" rel="stylesheet" />
</head>

Вы можете разместить столько ссылок CSS, сколько вам нужно. Я нахожу, что обычно лучше ставить файлы framework CSS выше ваших собственных.

Поделиться

phantom    

29 октября 2014 в 20:47

3

Все дело в специфичности CSS.

Если два свойства имеют одинаковый вес, используется последнее свойство.

Вы можете переопределить отдельные свойства CSS, объявив свойство !important .

Пример;

body {
  background-color: #000 !important;
}

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

Но вместо этого вам следует прочитать больше о специфике — http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ .

Поделиться

dojs    

29 октября 2014 в 20:50

0

Сначала вы должны добавить bootstrap css, а затем использовать свой собственный, но это будет сложно из-за css bootstrap. Убедитесь, что вы всегда проверяете, что делают классы начальной загрузки.

Поделиться

Florin Pop    

29 октября 2014 в 20:41

• Bootstrap 3 и Less вместе

  Я хотел использовать Bootstrap 3 и Less вместе. Вот что я сделал: установлено Node.js установлен Less с помощью npm загруженный исходный код bootstrap (в другом каталоге, чем каталог моего проекта) скопировал всю подпапку ‘/less ‘ в рабочий каталог моего проекта. создал свой собственный файл .less…

• Boostrap не перекрывает мой собственный css

  Я начинаю работать с bootstrap и хотел сделать простой выбор с помощью boostrap, но каким-то образом это разрушает мою страницу. Я думал, что boostrap переопределит мой собственный css, но этого не происходит, почему? <link rel=stylesheet type=text/css href=bootstrap-select.min.css/>…

Похожие вопросы:

могу ли я Добавить свой собственный класс css в отдельный файл css в bootstrap, и все равно мой сайт будет отзывчивым

я работаю над системой helpdesk и создаю эту систему в mvc . я разрабатываю эту систему в bootstrap framework .i и создал свою главную страницу с шаблоном bootstrap. я использую файл…

CSS Bootstrap переопределяет мой собственный CSS

Я пытаюсь создать разделительную кнопку на своем сайте (ASPNET WebForms). До сих пор единственная реализация сплит-кнопок, которая мне нравится, — это реализация Bootstrap. Я не использую никаких…

richfaces с bootstrap CSS

Возможно ли (и разумно ли) использовать JSF с richfaces и bootstrap CSS styling вместе в одном проекте? таким образом, используя richfaces для рендеринга страниц, UI моделей и ajax; оставляя стиль…

Создайте свой собственный шаблон сайта Google, используя мой собственный CSS

Есть ли способ создать свой собственный сайт Google, используя мой собственный код CSS? Я пробовал поставить <style> , но google мне этого не позволяет. Я могу использовать несколько…

Как иметь свой собственный style.css и bootstrap одновременно?

Итак, я только что вошел в Bootstrap и хочу использовать Bootstrap и использовать свой собственный CSS для вещей, которые я хочу заново прикоснуться к себе. Прямо сейчас все так: <link…

Bootstrap 3 и Less вместе

Я хотел использовать Bootstrap 3 и Less вместе. Вот что я сделал: установлено Node.js установлен Less с помощью npm загруженный исходный код bootstrap (в другом каталоге, чем каталог моего проекта)…

Boostrap не перекрывает мой собственный css

Я начинаю работать с bootstrap и хотел сделать простой выбор с помощью boostrap, но каким-то образом это разрушает мою страницу. Я думал, что boostrap переопределит мой собственный css, но этого не…

Почему Bootstrap CSS перезаписывает мой CSS?

В моем документе HTML я сначала перечисляю Bootstrap CSS,а затем мои файлы CSS. Тем не менее, некоторые из моих правил игнорируются, и в инструментах разработчика я вижу, что Bootstrap CSS прорезает…

Как использовать css-modules и bootstrap одновременно?

Я использую electron-react-boilerplate для своего проекта, и этот шаблон использует css-модули для целей стилизации. У меня возникли проблемы с использованием bootstrap и пользовательского стиля в…

Мой собственный css не переопределяет bootstrap css

Я не знаю, почему мой пользовательский файл css не перезаписывает bootstrap css. Я знаю о каскаде и о том, что мой новый атрибут класса css должен иметь более высокий приоритет, чем bootstraps, но…

Внешние таблицы стилей — Xiper

Автор: Александр Головко Дата публикации:

Последнее обновление:

Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.

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

Представляем внешнюю таблицу

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

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

Тег link для внешних таблиц стилей

Для подключения внешнего CSS используется тег link.

Знакомься, тег link:

• устанавливает связь с внешними документами, чаще всего с таблицами стилей;
• должен располагаться в секции head;
• в одном документе может быть несколько тегов link.

Примеры подключения CSS

<link rel="stylesheet" type="text/css" href="css/main.css" />

Как правило, используются три атрибута:

• rel — отвечает за установку взаимосвязи и в данном случае имеет значение «stylesheet»;
• type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип «text/сss»;
• href — абсолютный или относительный путь к самому CSS-файлу.

Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в нашем справочнике.

Пример подключения дополнительной таблицы стилей для устройств печати:

<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Основной CSS--> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!--Дополнительный CSS подключается автоматически, если страница выводится на устройство печати-->

Пример подключения CSS с использованием условных комментариев (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):

<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->

Достоинства внешних CSS

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

1. Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
2. Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
3. Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

Резюме

Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.

Настройки сайтов и страниц

Чтобы перейти к настройкам, кликните Настроить сайт в панели Действия.

Создавать и настраивать сайты могут сотрудники компании с определенными правами.

Основные настройки сайта

• 
  Адрес сайта – укажите, по какому адресу будет доступен ваш сайт.

  Вы также можете и подключить свой домен.
  

• 
  Виджет на сайт – с помощью какого виджета клиенты смогут с вами связаться.

  Более подробно о работе данного инструмента вы можете прочитать в статье Виджет открытых линий на сайте.
  

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

• 
  Цветовая палитра – основной цвет кнопок, элементов дизайна сайта и т.п.

• 
  Шрифты на сайте – можно выбрать шрифты заголовков и основного текста, а также относительный размер основного текста сайта.

• 
  Кнопка «Вверх» – очень полезный инструмент для работы с длинными страницами. Она позволяет быстро перейти к самому началу страницы.

• 
  Если ваш сайт содержит несколько страниц, то здесь вы также можете указать Главную страницу.

Дополнительные настройки

• 
  Favicon – картинка, которая показывается на закладке браузера. Допустимо только использование изображений в формате .PNG.

  
  

• 
  Фон страницы – установите картинку или цвет для фона страниц сайта. Это необходимо, если у вас есть блоки с повышенной прозрачностью, либо вы не устанавливали свой фон для каждой страницы.

• 
  Подтверждение прав – укажите необходимые мета-теги для подтверждения прав на сайт при подключении к Google Search Console и Яндекс.Вебмастеру.

• 
  Аналитика – для сайта очень важно вести статистику, чтобы контролировать его популярность и эффективность. Вставьте в данном поле идентификатор счетчика Яндекс, Google Analytics либо Google Tag Manager, чтобы фиксировать статистику посещений страниц.

  
  Подключение Яндекс.Метрики, Google Tag Manager и Google Analytics доступно только на коммерческих тарифах.
  

• 
  Размещение пикселя – пиксели Facebook и ВКонтакте используются для отслеживания конверсии вашего сайта.

  Более подробно о пикселях Facebook и ВКонтакте вы можете прочитать в статье Добавление пикселя Facebook и ВКонтакте.
  

• 
  Ключи карт – укажите ключ API Google Maps, чтобы добавлять на сайт расположение вашей компании.

  Подробнее читайте в статье Google-карты на сайтах.
  

• 
  Тип представления – позволяет выбрать для страниц вид отступов для отображения на экране.

• 
  Шаблон сайта – если вы хотите, чтобы на страницах были включены дополнительные области, то тут вы также можете их настроить.

• 
  Язык сайта – вы можете изменить отображение некоторых элементов сайта на нужном вам языке, например в веб-формах, кнопки магазина в заказе, подпись «Заряжено Битрикс24» и т.д.

• 
  Ошибка 404 – что увидят ваши пользователи, если страница будет недоступна. По умолчанию, сайт имеет стандартную страницу для 404-й ошибки. Но вы можете выбрать и свою из любой страницы сайта.

• 
  Настройки robots.txt – здесь можно задать текст файла для индексирования сайта роботами поисковых систем.

  Более подробно о данном файле вы можете прочитать в документации Яндекс и Google.
  

• 
  Ускорение сайта – при включенной опции оптимизируются CSS и JS таким образом, чтобы они подгружались по мере загрузки страницы. Это одно из условий Google PageSpeed Insights для ускорения загрузки сайтов.

• 
  Пользовательский HTML – вы можете вставить произвольный html-код для всех страниц сайта внутри тега HEAD, например, код статистики, мета-теги подтверждения и т.д.

  Опция Пользовательский HTML доступна только на коммерческих тарифах.
  

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

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

• 
  Обработка Cookie-файлов – важно, чтобы посетитель знал, какая персональная информация собирается посредством cookies-файлов на вашем сайте. Это опция позволяет включить предупреждение об этом и настроить, какие cookie будут хранить информацию о пользователе.

  Более подробно о настройке cookie-файлов вы можете прочитать в отдельной статье.

• 
  Подпись «Заряжено Битрикс24» – на коммерческих тарифах можно убрать эту подпись внизу вашего сайта.

Настройки страниц сайта

Настройки для каждой из страниц очень схожи с настройками самого сайта, но есть некоторые моменты.

• 
  Для страницы можно настроить ее собственный адрес, а также указать, в каком виде она будет отображаться при добавлении ссылки на страницу в соцсетях.

  
  

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

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

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

  
  HTML-код вставляется сразу после открывающего тега HEAD. Это может быть например код статистики для конкретной страницы. 

  Опция Пользовательский HTML доступна только на коммерческих тарифах.

• 
  Добавить страницу в карту сайта – посмотреть карту сайта можно по адресу [адрес сайта]/sitemap.xml, если вы, конечно, включали в нее какие-то страницы.

  Более подробно о карте сайта вы можете прочитать в отдельной статье.

Как видите, сайт можно настроить очень гибко, чтобы он идеально подходил под ваши пожелания!

Также рекомендую прочитать:

Как убрать подключение лишних JS и CSS файлов в jQuery.extend

Пишу сайт на D7+AT Commerce. Работает вроде бы довольно быстро, но заметил такую проблемку. Когда заходишь на сайт в первый раз — очень долгая пауза (секунд 5) перед появлением первой страницы. Затем уже все работает довольно шустро, задержка по полсекунды на страницу в среднем. Хотя в некоторых местах и бывают неожиданные тормоза.

По сайту сделано некоторые вещи в плане оптимизации, в том числе в настройках производительности включены все галочки (т.е. JS и CSS по идее должны объединяться и сжиматься).

Полез в генерируемый HTML и возникло много вопросов (код буду разбивать на части и комментировать):

1. Подгружается объединенный и разбитый на несколько частей CSS. Тут все ОК.

2. Подгружается выбранный в настройках темы шрифт. Ссылка именно такая, как написано. Практически уверен, что отсутствие http в ссылке — это ошибка.

<link type=»text/css» rel=»stylesheet» href=»//fonts.googleapis.com/css?family=Open+Sans» media=»all» />

3. Для разных версий ослика подгружаются свои хаки. Все ОК, но всегда хотел спросить, что означает в данном случае код m264pg после имени файла? Много раз встречал различные коды в этом месте. Зачем они нужны, если файл можно запросить и напрямую?

И опять почему-то «неправильная ссылка» (без http) на гугловский сервис. Или это я что-то не догоняю?

4. Подгружается JS по аналогии с CSS. Тут все понятно.

5. А вот теперь самое интересное. Код дальше был без переносов, я его привел к читаемому виду. Комменты мои.

jQuery.extend(Drupal.settings, {
«basePath»:»/»,
«pathPrefix»:»»,
«ajaxPageState»:{
«theme»:»at_commerce»,
«theme_token»:»NtHUBtnopWB2tm7Vixdg0GXcSE6cYXu4ILNe9bSxnVk»,

«js»:{
        «sites/all/themes/adaptivetheme/adaptivetheme/js/respond.js»:1,
        «misc/jquery.js»:1,
        «misc/jquery.once.js»:1,
        «misc/drupal.js»:1,
        «sites/all/modules/admin_menu/admin_devel/admin_devel.js»:1,
        «public://languages/ru_HNARSMkvZa6rBKUllFT3Atm68gj0c2jD9TzWjAx9D9g.js»:1,  /*  Ссылка внутренняя, и с клиента не видна. Это ошибка?  */
        «misc/vertical-tabs.js»:1,
        «sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js»:1,
        «sites/all/modules/colorbox/js/colorbox.js»:1,                             /* нет ли здесь дублирования предыдущего файла (выше строчкой)?  */
        «sites/all/modules/colorbox/styles/default/colorbox_default_style.js»:1,
        «sites/all/libraries/superfish/jquery.hoverIntent.minified.js»:1,
        «sites/all/libraries/superfish/jquery.bgiframe.min.js»:1,
        «sites/all/libraries/superfish/superfish.js»:1,
        «sites/all/libraries/superfish/supersubs.js»:1,
        «sites/all/libraries/superfish/supposition.js»:1,
        «sites/all/libraries/superfish/sftouchscreen.js»:1,
        «sites/all/modules/superfish/superfish.js»:1,
        «sites/all/themes/at-commerce/js/jquery.flexslider-min.js»:1,
        «sites/all/themes/at-commerce/js/slider.options.js»:1,
        «sites/all/themes/at-commerce/js/draw.js»:1
},

«css»: {
        «modules/system/system.base.css»:1,
        «modules/system/system.menus.css»:1,
        «modules/system/system.messages.css»:1,
        «modules/system/system.theme.css»:1,
        «modules/field/theme/field.css»:1,
        «modules/node/node.css»:1,
        «modules/search/search.css»:1,
        «sites/all/modules/ubercart/uc_order/uc_order.css»:1,
        «sites/all/modules/ubercart/uc_product/uc_product.css»:1,
        «sites/all/modules/ubercart/uc_store/uc_store.css»:1,
        «modules/user/user.css»:1,
        «sites/all/modules/views/css/views.css»:1,
        «sites/all/modules/colorbox/styles/default/colorbox_default_style.css»:1,
        «sites/all/modules/ctools/css/ctools.css»:1,
        «sites/all/libraries/superfish/css/superfish.css»:1,
        «sites/all/libraries/superfish/css/superfish-vertical.css»:1,     /*   Вертикальные меню Superfish не использую, как отключить его стили?   */
        «sites/all/libraries/superfish/css/superfish-navbar.css»:1,       /*   Тот же вопрос.   */
        «sites/all/modules/ds/layouts/ds_2col_stacked_fluid/ds_2col_stacked_fluid.css»:1,
        «0»:1, /*           */
        «1»:1, /* Зачем эти */
        «2»:1, /*  числа?   */
        «3»:1, /*           */
        «sites/all/themes/adaptivetheme/adaptivetheme/css/at.base.css»:1,
        «sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css»:1,
        «sites/all/themes/adaptivetheme/adaptivetheme/css/at.messages.css»:1,
        «sites/all/themes/at-commerce/css/styles.base.css»:1,
        «sites/all/themes/at-commerce/css/styles.modules.css»:1,
        «sites/all/themes/at-commerce/css/styles.settings.css»:1,
        «sites/all/themes/at-commerce/color/colors.css»:1,
        «sites/all/themes/at-commerce/css/styles.custom.css»:1,
        «public://at_css/at_commerce.responsive.layout.css»:1,                    /*   Опять кривая ссылка?   */
        «sites/all/themes/at-commerce/css/styles.slideshow.css»:1,
        «sites/all/themes/at-commerce/css/at_commerce.responsive.style.css»:1,
        «sites/all/themes/at-commerce/css/at_commerce.responsive.gpanels.css»:1,
        «//fonts.googleapis.com/css?family=Open+Sans»:1,                          /*   И еще?   */
        «sites/all/themes/at-commerce/css/ie-6.css»:1,       /*   Зачем подключать все хаки IE, если выше было избирательное подключение (см. п. 3)?  */
        «sites/all/themes/at-commerce/css/ie-lte-7.css»:1,
        «sites/all/themes/at-commerce/css/ie-8.css»:1,
        «sites/all/themes/at-commerce/css/ie-lte-9.css»:1,
        «sites/all/themes/at-commerce/css/ie-htc.css»:1
}
…
дальше неважно

В общем, много непонятного.
Непонятно, какой эффект дает объединение и сжатие CSS и JS, если они потом загружаются в jQuery.extend в несжатом виде?
Непонятно, почему в загрузку прописаны все подряд CSS и JS, а не в соответствии с используемыми фичами темы (у меня половина из этого не нужно)?
Непонятно, что это за кривые ссылки — ошибка или что-то хитрое, и оно все-таки работает? В отношении кривых ссылок у меня подозрение, что это они и дают тормоза при первом входе на сайт. Так как они прописаны в загрузке в хедере страницы, то браузер выжидает таймаут и только затем отображает страницу. А дальше он уже помнит, что эти ссылки плохие и не ждет.

Некоторые вещи я могу и сам проверить (те же кривые ссылки — работают или нет), но не успел пока, хотел запостить все это для обсуждения. Позже допишу, что накопаю.

Я в Drupal относительный новичок (но не в IT), поэтому буду признателен за разъяснения неочевидных моментов.

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

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

От автора:
здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.

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

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

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

А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:

Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:

rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.

type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.

href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.

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

Где взять готовые css стили для сайта?

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

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

Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код:

Текст в абзаце

И вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:

p{
font-size: 12px;
}
.title{
font-size: 36px;
}

Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h2) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.

Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h2 (без класса title), то для него никаких правил добавлено не будет.

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

Например, в таблице стилей видим такой код:

Nav{
width: 300px;
background: aqua;
…
}
.nav a{
display: block;
color: #ccc;
…
}

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

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

Как самому сделать css стили для сайта?

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

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

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

Самое главное, решительно настроиться на изучение и отбросить предубеждения о том, что это очень трудно. Также вам могут помочь бесплатные материалы на нашем сайте, статьи и видеоуроки. При желании вы и по ним сможете приобрести основные знания, которые нужны при работе с css.

На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.

CSS
— Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-тегам.

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:

Color:
red;

background:
#cccccc
;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

• Вложение(inline).
• Встраивание(embeding).
• Связывание(linking).

Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст

«color:red; background:#cccccc»
>
К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

p {

color:
red
;
background:
#cccccc

}

style>

Здесь применен стиль методом вложения.

Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

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

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.

CSS (Cascading Style Sheets), или каскадные таблицы стилей
, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style
. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

:

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

• Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле.css, с последующим подключением этого файла в HTML-документ с помощью тега
• Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега
• Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.

Давайте познакомимся со всеми тремя способами на конкретных примерах.

Внешняя таблица стилей

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

. Элемент должен использовать три следующих атрибута. В атрибуте href
указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel
определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet
, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type
определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css
.

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

Т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:

P {
color: red;
}

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.

Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами

и
:

Пример: Внешняя таблица стилей

• Попробуй сам »

Текст первый

Текст второй

Текст третий

Внешняя таблица стилей

Текст первый

Текст второй

Текст третий

Один, два или три | CSS-уловки

Вот сколько файлов CSS должно быть загружено на любой веб-сайт.

Один

• Одностраничный сайт.
• Довольно простой сайт всего с парой страниц, которые не слишком разные.
• Блог или подобный блогу сайт, где даже если есть тысячи страниц и таксономий, они в основном выглядят одинаково.

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

Два

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

Веб-приложению с разными, довольно «разрозненными» разделами, вероятно, потребуется два файла CSS. Один глобальный с наиболее распространенными шаблонами проектирования, а затем файл CSS для конкретного раздела с менее распространенными шаблонами проектирования, которые требуются для этого раздела. Сайтам с множеством совершенно разных стилей страниц, вероятно, потребуется две таблицы стилей. Глобальный (вероятно, или общих элементов) и файл CSS, специфичный для уникальных страниц.

Три

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

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

Я предлагаю три файла CSS, которые необходимы любой странице.

Это развернутый CSS

Когда я говорю «один», «два» или «три», я имею в виду файлы CSS, на которые есть ссылки из заголовка развернутых веб-сайтов.Я не говорю о файлах CSS, которые вы редактируете как разработчик. Для этого вы должны работать с любыми модульными фрагментами, которые кажутся вам понятными. Затем эти модульные блоки объединяются в окончательный набор развернутых файлов. Вы можете сделать это с помощью таких вещей, как Rails Asset Pipeline, с помощью препроцессора CSS или с такими приложениями, как CodeKit.

Например:

Global = main.css + grid.css + typography.css + buttons.css + print.css
Раздел сайта A = tabs.css + editor.css
Раздел сайта B = forms.css + video.css + details.css

Что загружается в «редакторскую» часть site = global.css и site-section-a.css
Что загружается в «детали» части site = global.css и site-section-b.css

Разве не всегда лучше?

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

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

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

ОК

Теперь вы можете троллить меня за чрезмерное упрощение.=)

Организация вашего CSS — Изучите веб-разработку

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

Вот несколько общих советов о том, как поддерживать порядок и порядок в таблицах стилей.

Есть ли в вашем проекте руководство по стилю кодирования?

Если вы работаете с командой над существующим проектом, первое, что нужно проверить, — это то, есть ли в проекте существующее руководство по стилю для CSS.Руководство по командному стилю всегда должно преобладать над вашими личными предпочтениями. Часто нет правильного или неправильного способа делать что-либо, но последовательность важна.

Например, взгляните на рекомендации CSS для примеров кода MDN.

Поддерживайте согласованность

Если вам удалось установить правила для проекта или вы работаете в одиночку, то самое важное, что нужно сделать, — это сохранить последовательность. Согласованность может применяться всевозможными способами, такими как использование одних и тех же соглашений об именах для классов, выбор одного метода описания цвета или поддержание согласованного форматирования.(Например, будете ли вы использовать табуляции или пробелы для отступа в коде? Если пробелы, сколько пробелов?)

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

Форматирование читаемых CSS

Есть несколько способов увидеть форматирование CSS. Некоторые разработчики помещают все правила в одну строку, например:

  .box {background-color: # 567895; }
h3 {цвет фона: черный; цвет белый; }
  

Другие разработчики предпочитают разбивать все на новую строку:

 .коробка {
  цвет фона: # 567895;
}

h3 {
  цвет фона: черный;
  цвет белый;
}
  

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

Добавление комментариев к CSS поможет любому будущему разработчику работать с вашим файлом CSS, но также поможет вам, когда вы вернетесь к проекту после перерыва.

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

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

Возможно, вы использовали свойство CSS определенным образом, чтобы обойти несовместимость старых браузеров, например:

  .box {
  цвет фона: красный;
  фоновое изображение: линейный градиент (вправо, # ff0000, # aa0000);
}
  

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

Создайте логические разделы в таблице стилей

Рекомендуется сначала включить в таблицу стилей все общие стили. Это означает, что все стили будут применяться, если вы не сделаете что-то особенное с этим элементом.Обычно у вас есть правила, настроенные для:

• корпус
• п
• h2 , h3 , h4 , h5 , h5
• ul и ol
• Таблица свойства
• Ссылки

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

 

тело { ... }

h2, h3, h4, h5 {...}

ул {...}

blockquote {...}
  

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

 

.nobullets {
  стиль списка: нет;
  маржа: 0;
  отступ: 0;
}

...
  

Затем мы можем добавить все, что используется по всему сайту. Это могут быть такие вещи, как базовый макет страницы, заголовок, стиль навигации и т. Д.

 

.main-nav {...}

.logo {...}
  

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

 

.product-list {...}

.product-box {...}
  

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

Избегайте чрезмерно специфичных селекторов

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

с классом , ящик внутри

  article.main p.box {
  граница: 1px solid #ccc;
}
  

  .box {
  граница: 1px solid #ccc;
}
  

  .comment {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
}

.comment img {
  граница: 1 пиксель сплошного серого цвета;
}

.comment .content {
  размер шрифта: .8rem;
}

.пункт списка {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
  нижняя граница: сплошной серый 1px;
}

.list-item .content {
  размер шрифта: .8rem;
}
  

  .media {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 3fr;
}

.media .content {
  размер шрифта: .8rem;
}

.comment img {
  граница: 1 пиксель сплошного серого цвета;
}

.пункт списка {
  нижняя граница: сплошной серый 1px;
}
  

  <форма>
  
  <ввод
   
    type = "submit" />

  

  $ базовый цвет: # c6538c;

.тревога {
  граница: 1px solid $ base-color;
}
  

  .alert {
  граница: 1px solid # c6538c;
}
  

  // фундамент / _index.дерзость
@ использовать 'код'
@ использовать 'списки'
@ использовать "нижний колонтитул"
@ использовать 'ссылки'
  

  // style.sass
@ использовать 'фонд'
  

.css 
 

style.css 
 standard.css 
 default.css