> >

В какой папке файлы css. Структура папок и элементов

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

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

Структура сайта

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

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

  • Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
  • Родительский каталог - это папка, содержащая другой каталог.
  • Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:

Схему, показывающую вложенность элементов, можно представить следующим образом:

  • Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком .
  • Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими , в примере такими элементами являются и , и <style> .</li> <li><span>Корневой элемент </span> - самый <a href="/computer/kakoi-element-ustanavlivaet-verhnii-indeks-delaem-v-css-verhnii-registr.html">верхний элемент</a> в иерархии (<html>), все другие элементы являются его потомками.</li> <li><span>Родительский элемент </span> - это элемент, который содержит другой элемент. Иногда его называют просто родитель .</li> <li>Потомок может являться непосредственно <a href="/internet/css-vybrat-pervyi-dochernii-element-dochernie-selektory-css-ogranichenie-dlya.html">дочерним элементом</a>, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.</li> </ul> <p>Которые мы сейчас и рассмотрим по порядку.</p> <p>Как я уже говорил раньше, css призван оформлять html конструкции, то есть придавать им вид, цвет, размер, расположение, и так далее, а значит непосредственно воздействовать на html код.</p> <p>Для обеспечения этого воздействия, выполняется подключение css к html документу.</p> <p>Первый способ подключения css — cвязанные стили </span>. Применяется тогда, когда таблица стилей пишется в отдельном файле.</p> <p>В этом случае, файл style.css с таблицей стилей, подключается к html файлу в теге head, при помощи тега link</p> <p><!DOCTYPE html><br> <html lang ="ru "><br> <head ><br> <meta charset ="utf-8 " /><br><<span>link href ="css/style.css " type ="text/css " rel ="stylesheet "> </span><br> <title >Документ без названия


    link — это одиночный тег;

    href – знакомый нам атрибут ссылок, css/stile.css – значение указывающее путь к файлу, и название файла;

    type – атрибут указывающий тип подключаемого элемента, в нашем случае это text/css ;

    rel – атрибут определяющий взаимосвязь, и в значении его обычно пишется stylesheet (таблицы стилей);

    В этом коде обычно меняется только значение style.css (название подключаемой таблицы). Таблицы подключены.

    Теперь браузер будет отображать html файл в том виде, который для него будет прописан в файле style.css .

    Кстати, на будущее. К одному html файлу можно подключать сколько угодно таблиц стилей. Все они подключаются в тег head .

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

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

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

    Дело в том, что одной из задач веб-мастера является уменьшение объёма кода, при неизменном конечном результате, и отдельный файл style.css наиболее полно отвечает этому требованию.

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

    В файле style.css можно будет задать стили один раз, но для всех заголовков постов сайта.

    Теперь понимаете разницу?

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

    Второй способ подключения css- глобальные стили позволяет подключать(располагать) таблицу стилей непосредственно в html файле.

    Делается это при помощи тега style , и прописывается он так-же, как и в первом случае в теге head .





    Документ без названия



    Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.

    Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.

    Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.

    Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.

    Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.

    Применяется он тогда, когда нужно оформить только один элемент контента.

    Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span

    Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.

    В примере 8.2 показано создание абсолютной ссылки на другой сайт.

    Пример 8.2. Использование абсолютных ссылок

    Абсолютный адрес

    Изучение HTML

    При указании в качестве ссылки каталога сайта (например, http://сайт/css/), отображается индексный файл . Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html .

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

    Ссылки относительно текущего документа

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

    1. Файлы располагаются в одной папке (рис. 8.4).

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

    2. Файлы размещаются в разных папках (рис. 8.5).

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

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

    3. Файлы размещаются в разных папках (рис. 8.6).

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

    Ссылка

    Аналогично обстоит дело с любым числом вложенных папок.

    4. Файлы размещаются в разных папках (рис. 8.7).

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

    Ссылка

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

    Ссылка

    Ссылки относительно корня сайта

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

    Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

    Дата публикации: 2018-03-27

    От автора: работа над большими проектами сопряжена со сложностью работы с большим кодом в большой команде. Слишком часто я ловил себя на том, что не следую главным принципам разработки ПО типа DRY (не повторяться), KISS (все должно быть до глупости просто) и YAGNI (вам это не понадобится).

    Учитывая эти проблемы, я начал использовать самые распространенные системы: OOCSS, SMACSS, ITCSS, ACSS и БЭМ - с их помощью создается приемлемая архитектура CSS.

    На самом деле, я ценю все CSS архитектуры по некоторым причинам и не хочу искать идеальную. Я пришел к выводу, что лучшее то решение, которое реально работает для всех людей, работающих над ним. Решению далеко до human-friendly, если в нем есть слабости. Иногда мы легко теряемся в техниках и забываем, что за каждой строкой кода стоит человек. То, как мы пишем и организуем код, должно быть важным средством передачи полезной информации другим разработчикам, а не только техническим решением проблемы.

    Из этого я делаю вывод, что установки соглашений уже недостаточно. Нужно также принять соглашение, ориентированное на пользователя. Все это значит:

    Избегайте избыточной сложности

    Объясняйте и делайте синтаксис класса легкочитаемым

    Следуйте порядку и соблюдайте чистоту

    Попробуйте создать гибкую модель, способную изменяться и развиваться, когда людям это потребуется

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

    Как расшифровывается UFOCSS?

    Несмотря на схожесть названия, UFOCSS расшифровывается как User Friendly Oriented CSS. Это не методология пришельцев и не новый способ представления масштабируемой и модульной CSS архитектуры. Это попытка сосредоточиться на самой «человеческой» части того, что мы уже ценим. К чему это ведет? Давайте разбираться!

    Мне кажется, что здесь нужно работать над крупным веб-проектом, где в разработке используются SCSS и PostCSS. Так CSS код можно разбить на категории и организовать в маленькие логические единицы, разделив код по множеству папок и файлов, которые ссылаются друг на друга через директиву @import. Далее билд система использует файлы и скомпилирует их в один файл стилей для продакшена и сохранит его в папку назначения.

    В общем, каталог стилей может быть таким:

    Как видите, код разбит на 2 главные папки: abstracts и modules. Это помогает поддерживать структуру папок в чистоте и порядке, не создавая дополнительные папки, которые не так уж и нужны.

    Названия папок можете выбрать какие угодно (т.е. tools для abstracts и patterns или layers для modules). Я использую соглашение о сортировке папок в алфавитном и числовом порядке. Такое соглашение действительно полезно при работе с языками, в основе которых лежит каскадирование и принципы наследования.

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

    Если представить проект, как слоёный бисквит, то:

    вы не можете делать верхние слои, если нет первого

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

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

    Папка abstract: здесь живут инструменты

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

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

    Abstracts – это ингредиенты и инструменты, необходимые для старта и ускорения разработки, как переменные, функции и миксины. Они не влияют на внешний вид и вкус пирога, но определяют способ создания и поддержки. Никому они не нужны кроме вас и вашей команды!

    Все файлы abstracts говорят сами за себя. Просто учтите, что я беру все, что нужно широко использовать из файла _variables – цвета, шрифты, grid и z-index. Я считаю, так всем легче понять, какие инструменты нам нужны.

    Например, файл z-index управляет вертикальным порядком элементов. Хорошая практика управления z-index в сложных макетах – установка нескольких Sass списков, в которых описано, в каком порядке мы хотим выводить элементы, от низшего к высшему.

    Учтите, что для создания нового контекста стека необходимо модальное окно. Можно просто создать новый Sass список в файле z-index:

    $modal-elements: fields, form-controls, alerts, autocomplete-dropdown;

    $ modal - elements : fields , form - controls , alerts , autocomplete - dropdown ;

    Этот Sass список – просто инструмент, помогающий безопасно управлять порядком стека элементов, он не генерирует CSS правила.

    Использовать этот инструмент, получить значение z-index и присвоить его всем элементам можно через Sass функцию index() внутри корректного файла module, как показано ниже:

    Modal-alerts { z-index: index($modal-elements, alerts); .... }

    Modal - alerts {

    z - index : index ($ modal - elements , alerts ) ;

    . . . .

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

    Папка modules: здесь живут слои

    Принцип действия в соответствии с уровнями возрастающей сложности и специфичности позволяет нам добавить второй кирпичик в стену CSS – это определение слоев CSS.

    Слой abstracts, рассмотренный ранее, можно считать нулевым. После создания всех необходимых инструментов и «ингредиентов» можно начать писать стили нашего проекта через прогрессивные слои абстракции (о них ниже).

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

    Использование префиксов для простого определения области применения класса – хорошая практика, которую принимают главные системы архитектуры CSS типа SMACSS и ITCSS. Детально о соглашении об именовании я расскажу в следующей статье, а сейчас просто учтите, что я также буду использовать префиксы в названиях файлов. Это можно достичь:

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

    Все точно знают, для чего используется файл

    Используемые префиксы отсортированы в алфавитном порядке. То есть они показаны в том порядке, в котором импортированы, что подчиняется принципу специфичности (сначала идет основа, затем макеты, объекты, утилиты и вендорные слои)

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

    Я пытаюсь упростить структуру папок, уменьшив и переименовав слои, представленные ITCSS: Settings, Tools, Generic, Elements, Objects, Components and Trumps.

    Мне удобно сгруппировать переменные, функции и миксины в один слой Abstracts, а не разбивать их между Settings и Tools

    Generic и Elements можно объединить в слой Base, так как оба включают самые базовые и низко специфичные классы

    Я предпочитаю переименовывать слой Objects в Layout – самый понятный слой, так как он используется для некосметических классов

    Components я переименую в Objects, так как этот слой можно использовать также для более атомных элементов

    Trumps используется для утилит, поэтому я просто назову слой Utility

    Если есть необходимость, вам никто не запрещает добавить дополнительный слой типа templates. Этот слой можно использовать для правил, которые уникально применяются в каких-то шаблонах. Я бы в таком случае использовал префикс _t_. Или же можно использовать следующие слои.

    Слой bases

    Это первый слой, который генерирует реальные CSS правила. Здесь располагаются стили reset или normalize, глобальные правила типа box-sizing и стили для текстовых HTML тегов. Я также думаю, что на этом уровне моно разместить некоторые хелпер-классы, строго относящиеся к HTML тегам типа.h1, .small, .mark – это пригодится, когда между стилем и семантикой нет соответствия.

    Здесь можно разместить правила шрифтов, как показано ниже:

    h1, .h1-like { font: { family: $font-primary; weight: bold; size: 2rem; } text-transform: uppercase; ...... }

    h1 , . h1 - like {

    font : {

    family : $ font - primary ;

    weight : bold ;

    size : 2rem ;

    text - transform : uppercase ;

    . . . . . .

    Я бы включил эти правила в файл _b_typography.scss. Префикс _b_ расшифровывается как base.

    Слой layouts

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

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

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

    Идея разделения структуры и дизайна заимствована у OOCSS (SMACSS и ITCSS тоже принимают этот принцип). Я считаю, что его и дальше нужно придерживаться, так как он помогает разработчикам легко определять область видимости классов и повторно использовать их в любом месте.

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

    Представьте, что ваш клиент хочет разместить до 6 блоков в строке. Это никак не относится к дизайну всех элементов, поэтому можно создать файл _l_columns.scss, который работает только с размещением определенных блоковых элементов.

    $min-cols: 2; $max-cols: 6; .l_columns-1 { display: grid; grid-row-gap: 30px; grid-column-gap: 30px; } @for $i from $min-cols through $max-cols { .l_columns-#{$i} { @extend .l_columns-1; grid-template-columns: repeat($i, 1fr); } }

    $ min - cols : 2 ;

    $ max - cols : 6 ;

    L_columns - 1 {

    display : grid ;

    grid - row - gap : 30px ;

    grid - column - gap : 30px ;

    @ for $ i from $ min - cols through $ max - cols {

    Интернет 
    Самое интересное:
    Обозначь каждый многоугольник измерь длины сторон каждого
    Подключаем YouTube к телевизору
    Названия больших чисел Решение составной задачи