Где хранятся все настройки css

Здравствуйте, Иван!

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

Еще один важный момент вспомнил.

По моей логике (я не настолько опытный веб-разработчик и чаще всего я только предполагаю и пытаюсь узнать действительность) одна важнейших составляющих CMS — это как раз таки компоненты и модули, которые лежат себе в своих папочках и ни кого не трогают и могут подключать свои JS и CSS (которые хранятся в директории компонента/модуля). Это я на тот момент описал так:

и получил ответ:

Я согласен что это увеличивает загрузку страницы из-за того что браузер из-за своих особенностей не может одновременно с одного и того же доменного имени загружать более

3 CSS (или JS), но на этот случай в Битрикс есть стандартный функционал, который объединяет CSS и JS.

Я надеюсь речь о размещении в шаблоне по пути bitrix/components/папка компонента ? Из курса должны были запомнить что раздел с компонентами из пространства имен bitrix менять нельзя.

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

Источник

Где должен лежать файл стиля страницы ?

Такой вопрос, если я указываю файл цсс в хеад.

Где должен лежать текстовой файл чтобы его открыть с помощью StreamReader?
где должен лежать текстовой файл чтобы его открыть с помощью StreamReader?

Где должен лежать архив mobile.zip?
где должен лежать архив mobile.zip или файлы из этого архива? «Отсутствует файл с 1С:Предприятием.

Каким должен быть файл и где он должен находиться?
Нашёл код, который берёт текстовый файл, читает его и выбирает слова, в которых есть такая же.

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

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

Что в твоем случае?
Если указываешь просто styles.css, то путь определяется по пути текущей страницы (относительный путь)
Например. Ты в /news/nes1234.html
Тогда в твоем случае файл забирается от сюда /news/styles.css
Переходишь на другую страницу путь до стилевого файла измениться в соответствии с указанным правилом.

Решение

Директорию «assets» можно называть произвольно, например: stat, st, static, public, sets и т.д.

Источник

Введение в CCSS (Компонентный CSS)

CCSS или компонентный CSS , это архитектура, которая упрощает составление CSS для крупных веб-приложений.

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

С появлением такого большого количества фреймворков, руководств, инструментов и методологий ( OOCSS, SMACSS, BEM и т.д.), разработчики нуждаются в CSS архитектуре, которая обеспечит простое сопровождение, управление и масштабирование проектов.

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

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

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

Элементы CCSS

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

SMACSS

SMACSS, был создан Джонатаном Снуком , и расшифровывается, как Scalable and Modular Architecture for CSS ( Масштабируемая и модулируемая архитектура для CSS ). Это, скорее, руководство по стилям, чем фреймворк. Для получения более детальной информации о том, как он используется в структуре CCSS , прочитайте статью SMACSS .

BEM был создан разработчиками Yandex , расшифровывается, как “ Block ”, “ Element ”, “ Modifier ” (« Блок «, « Элемент «, « Модификатор «). Эта методология предлагает новый подход при разработке веб-интерфейсов. Более подробную информацию по BEM вы можете найти в отличной статье Гарри Робертса .

Sass — это CSS с суперсилами. Я очень рекомендую именно его, но вы можете использовать также Less . Дополнительную информацию вы можете найти в документации Sass .

Compass

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

Примеси Compass практически всегда должны использоваться, когда нам нужны префиксы. Опять же, его применение весьма желательно, или по своему усмотрению вы можете использовать Bourbon .

Принципы CCSS

Теперь давайте рассмотрим основные принципы CCSS .

Компонентная основа

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

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

Модульность и изолированность

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

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

Возможность компоновки

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

Для всех разработчиков гораздо проще составлять CSS -код, похожий на блоки конструктора « Лего », чем участвовать в CSS войне. Классы CSS являются строительными блоками, которые используются для составления стилей.

Предсказуемость

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

Документирование

Большинство людей считают, что CSS не требует пояснений. На самом деле это, как правило, не так! Компоненты CSS должны быть четко задокументированы, с тем, чтобы в описаниях было подробно разъяснено, что они делают и как они должны использоваться.

Структура каталогов

Ниже для облегчения восприятия приводится пример структуры папок. Я также разместил пример настройки CCSS в хранилище на GitHub :

Многие приложения поддерживаются внешними CSS -фреймворками, такими как Bootstrap или Foundation , поэтому я добавил их в этом примере в папку ext/ . Хотя конечно здорово, если все CSS -коды пишутся с нуля; тем не менее, вы можете использовать описанный выше метод.

Папка components/ отлично подходит для применения AngularJS , но ее можно настроить под другие фреймворки или приложения. Более подробно я расскажу об этом в разделе « Архитектура ».

На странице HTML , включающей в себя все файлы .css из папки style/ , содержатся все скомпилированные CSS-коды ( из Grunt, Compass и т.д .). Никогда не изменяйте их.

Конвенция имен — упрощенный BEM

• u-className — глобальные базовые классы / классы утилит;
• img-className — глобальные классы изображений;
• animate-className — глобальные классы анимации;
• ComponentName — стандартные компоненты (B);
• ComponentName-elementName — элементы компонента (E);
• ComponentName—modifierName — модификатор компонента (М).

Обратите внимание на название стиля компонентов UpperCamelCase , это основной элемент; это означает, что он является верхним элементом компонента. Имена элементов и модификаторов — elementName и modifierName , соответственно. Не используйте дефис (-), чтобы разделять имена компонентов, так как он означает начало элемента / имени элементов.

Архитектура и дизайн

Давайте рассмотрим архитектуру, построенную согласно принципам CCSS .

Grunt

Grunt является отличным элементом для запуска задач, который автоматизирует многие рутинные действия ( например, компиляцию CSS или проверку HTML ).

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

Организация файлов

Посмотрите еще раз на структуру папок, которая является производной от SMACSS . Обратите внимание на папку ext/ , которая содержит все внешние фреймворки ( такие как Bootstrap ). Для более простого внесения изменений изменения и расширения должны вноситься не в нее, а в папку base/ .

base/ — это место, где хранятся глобальные базовые стили, используемые приложением в целом.
_base.scss — базовые стили только для селекторов элементов. Они являются своего рода « CSS-переключателями «.
_base-classes.scss — все классы утилит, используемые по всему приложению в разных представлениях, компонентах и на страницах. Используется префикс имени класса u- .
images.scss используется в качестве источника компиляции SCSS . Должен определять и встраивать все изображения сайта, как Data URI . /app/styles/images.css генерируется из этого файла.
_animate.scss содержит все классы анимации всего приложения.
_bootstrap-overrides.scss содержит только файлы, измененные фреймворком. Иногда уровень, назначенный селекторам фреймворка, настолько высок, что их переопределение требует дополнительных селекторов. Изменение на глобальном уровне не может быть осуществлено в контексте компонента SCSS . Вместо этого все глобальные изменения собираются здесь.

Компоненты

Любой блок многоразово используемого CSS -кода, не упомянутого выше, считается « компонентом «. Мы используем AngularJS , поэтому я разделяю их на три основные категории: представления / страницы, директивы и стандарты; следовательно, структура этих папок опирается на SMACSS .

В примере настроек, размещенном на GitHub , я, чтобы было понятнее, создал отдельные папки.

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

Это дало мне огромный плюс, так как стимулировало остальных членов команды следовать синтаксису BEM . Это также позволило избежать путаницы при отходе от использования типичного стиля BEM с его символами -, — и __, которые генерируют такие имена классов, как module-name__child-name—modifier-name !

Также важно, что порядок определения классов CSS в компоненте отражает представление HTML . Это облегчает сканирование, назначение стилей, редактирование и применение классов.

Наконец, хорошо иметь для веб-приложения обширное руководство по стилям и следовать гайдлайнам по CSS и Sass ( например, избавиться от необходимости использования @extend ).

Пример CCSS

Смотрите код примера настроек CSS .

Вот пример компонента на Sass :

Это код компилируется в следующий CSS :

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

Вы можете задействовать упрощенную BEM-примесь , которая для достижения этой цели использует эталонный селектор, и является более простой, чем @at-root .

В Sass 3.3+ работать с BEM стало намного проще, что дает нам возможность поддерживать и сопровождать код, который легко понять.

Ваше участие

Ваше участие в развитии материалов, размещенных на GitHub , в виде просьб добавить больше примеров, разъяснений и т.д., будет очень полезным.

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

Источник