Html начало

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

Четко определенная структура сайта важна для SEO по трем основным причинам:

1. Она помогает поисковым системам лучше понять ваш контент

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

Работа поисковых систем заключается в следующем:

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

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

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

1. Хорошая структура увеличивает ваши шансы на получение дополнительных ссылок в поиске Google

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

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

Единственный способ получить дополнительные ссылки на сайт с поиска — это хорошая структура сайта.

1. Хорошая структура приводит к улучшению поведенческих факторов.

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

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

§2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов

    Порядок подключения CSS (каскадных таблиц стилей, в современном вебдизайне в css-файле хранится всё визуальное оформление сайта) критично сказывается на порядке наложения правил оформления HTML-элементов. Это значит, что последний подключённый файл CSS будет иметь приоритет над предыдущими.

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

    В отношении JavaScript правила такие: библиотеки функций и фреймворки, например Jquery или MooTools, подключаются первыми. За ними идут плагины и вызовы необходимых функций с параметрами. Если перепутать порядок подключения, скрипты работать не будут!

    Пример подключения библиотеки Jquery и плагина к ней:

   jquery.js»>
   plagin.js»>

    Дальше мы познакомимся с видами вёрстки.

Правильная структура сайта, типы структуры, примеры в виде схем

Посмотрев ТОП Яндекса и Google по запросу “структура сайта” нашел много интересной “шлаковой информации”, как только не извращаются вебмастера-учителя описывая структуру сайта. Выдумали кучу схем и названий, описания к ним и примеры непонятно от куда взятые.

Итак, давайте все по порядку. Структура сайта бывает:

• Простая (двухуровневая), главная страница и много внутренних страниц 2-го уровня (home.ru/stranica1 и home.ru/stranica2 и т.д.)
• сложная (древовидная, три и больше уровней вложенности home.ru/category/stranica1 и home.ru/blog/statya и т.д.)

Все больше вариантов нет! Можно встретить такие понятия как смешанная, линейная, решетчатая и еще куча всякой белиберды можно найти в сети. Только два вида простая (2 уровня вложенности URL) и сложная или древовидная 2 и больше уровней.

Так же можно разделить структура на два типа:

• Правильная (логически составленная и понятна людям и роботу);
• не правильная (никакой логики, полное отсутствие структуры (сплошная каша)).

Пример простой структуры сайта (схема)

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

Если кроме главной вы планируете создавать 20-30 или же 100 страниц, обязательно создайте структуру, разбейте страницы и будущие страницы на группы, это будет правильно и в дальнейшем позитивно скажется на продвижении вашего сайта.

Пример древовидной структуры сайта, схема и пояснения

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

На примере схемы показано все виды структуры, в совокупности это и есть древовидная структура сайта.

Теперь немного поясню:

1. примеры 1.1, 1.2, 2.1, 3.1 идентичны, так показал что бы вас не вводили в заблуждения другие “умники”. Древовидная структура формируется по принципу Главная/категория/статья или же Главная/категория/подкатегория/статья.
2. В древовидной структуре может быть несколько веток, каждая из которых может иметь разную глубину вложенности (первая ветка Главная/О компании, вторая ветка Главная/Услуги/SEO анализ, третья ветка Главная/Блог/Самостоятельное продвижение/Методы продвижения), в совокупности эти три ветки сформируют отличную, правильную структуру сайта.
3. В примере 3.2 показано как делать ненужно, очень глубокое размещение материала не эффективно. Как поисковые роботы так и посетители попросту не дойдут до этой информации, контент будет утерян и не принесет никаких плодов. Опускаться ниже 4-го уровня лучше не стоит, если только вы не владелец Amazon.

Причина#

Упомянутые выше проблемные примеры объединяет одна особенность: все они слишком полагаются на оформление CSS.

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

Простой ответ на этот вопрос «да», но, как обычно, всё не так просто. Разделять содержимое и представление хорошо, но содержимое не отделяется от представления только потому, что ваш CSS отделён от HTML. Скажем иначе: вы не достигнете цели, если просто уберёте всё представление из HTML, но при этом для работы вашего CSS потребуется подробнейшее знание структуры HTML.

Более того, HTML редко состоит только из содержимого, почти всегда в нём есть и структура. И часто эта структура состоит из контейнеров, единственной задачей которых является объединение некоторой группы элементов для работы CSS. Даже без презентационных классов такие структуры добавляют представление в HTML-код. Но действительно ли это смешивает содержимое с представлением?

Я уверен, что на текущем уровне развития HTML и CSS необходимо и зачастую разумно использовать HTML и CSS в качестве единого слоя представления. Слой содержимого в таком случае может быть отделён с помощью шаблонизаторов или подключаемых фрагментов (как partials в Ruby).

Синтаксис CSS-правил

Давайте разберем основу основ CSS, а именно, синтаксис написания CSS-правил. Сделаем это на примере правила для тега
<h1> , которое мы написали выше.

Посмотрите на картинку:

Объявление стиля (или CSS-правило) состоит из 2-х частей:

1. Селектор, в нашем случает h1 (о селекторах позже поговорим подробнее)
2. Блок объявлений (находится после селектора в фигурных скобках)

В блоке объявлений, может находится множество объявлений. Каждое объявление состоит из:

• Свойства, которое определяет что будет сделано (в примере text-align – т.е. текст будет выровнен);
• Двоеточия «:» – разделяет свойство и значение;
• Значение, которое описывает как браузер должен обработать свойство (в примере center – т.е. текст будет выровнен по центру)

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

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

Вот справочный указатель на портале mdn: https://developer.mozilla.org/ru/docs/Web/CSS/Reference

Также мне нравится справочник: https://webref.ru/css

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

Практический алгоритм действий.

Предположим, стоит задача сделать красный текст на желтом фоне.

Мы понимаем, что надо:

• Сделать цвет шрифта красным
• Сделать желтый фон

Ищем подходящие свойства – это color и background-color. В итоге:

{
    color: red;
    background-color: yellow;
}

1 2 3 4

{ colorred; background-coloryellow; }

Пример сложнее. Скажем, вам требуется, в каком-то блоке, фоном которого является картинка, написать текст. Вы пишите его и понимаете, что фоновая картинка слишком пестрая и текст на ней не читается.

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

Но! Вот проблема: вы в принципе не понимаете, как это сделать, какие свойства искать, как к этому подступиться.

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

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

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

Если вам не совсем понятны примеры, то смотрите из каких свойств состоят правила, ищите эти свойства в справочнике и читайте описания.

Как посмотреть и оценить структуру сайта конкурента

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

Структуру стороннего ресурса можно проверить вручную.

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

Обратите внимание на URL-адреса страниц, чтобы понять, имеют ли визуальные элементы какую-либо иерархию. Например, наличие у страницы «Двери» в меню подстраницы «Установка дверей» вовсе не означает, что вторая страница подчиняется первой

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

В данном случае следует посмотреть на адрес страницы «Установка дверей». Если заметите в нем папку «Двери» (site.ru/dveri/ustanovka-dverei), то подчинение действительно есть. А URL типа site.ru/ ustanovka-dverei показывает, что рассматриваемая страница существует сама по себе. И это неправильно.

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

Только делайте это осторожно, ведь не все из них работают корректно

Как посмотреть html код страницы

В любом браузере (например, Firefox, Google Chrome, Opera) нажмите правой кнопкой мыши на любом месте на странице сайта и выберите из выпадающего меню «исходный код страницы» или воспользоваться комбинацией CTRL+U. Перед Вами откроется html-код страницы. Каждая страница сайта, которая есть в интернете, имеет свой код.

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

Суммарное число html тегов не так уж и велико (по факту используется лишь 10-15 тегов). Плюс к тому же все страницы одного сайта очень похожи друг на друга (отличия заключаются лишь в контентной части). Давайте сразу рассмотрим простенький пример создания html-страницы, чтобы начать наше изучение.

Элементы, предназначенные для создания структуры документа в HTML 4

Создание структуры документа до HTML5 осуществлялось с помощью элементов , , , , и . Каждый из представленных элементов представляет собой заголовок, имеющий определённый ранг (уровень). Уровень заголовка определяется на основании числа, указанного в его наименовании. Т.е. элемент имеет 1 ранг (1 уровень), элемент — 2 ранг (2 уровень), элемент — 3 ранг (3 уровень) и т.д

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

Из всех заголовков, самым важным является заголовок, который образован с помощью элемента (самый высокий ранг). А самым незначительным из всех заголовков является заголовок, который образован с помощью элемента (самый низкий ранг).

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

Важность призыва к действию в структуре сайта

Какой бы ни была структура сайта, схема обязательно должна предусматривать призыв к действию. Как правило, он размещается в тексте несколько раз. Первый – сразу после специального предложения. Второй раз – в середине текста. Третий – в конце. Если текст длинный, призывов к действию может быть и больше. Они могут быть сформулированы одинаково или по-разному в зависимости от общего контекста статьи.

Иногда призывы делают двойными, например, «Купите товар и оформите подписку». Или добавляют предложение о выгоде: «Запишитесь на консультацию. Первая бесплатно!». Или ограничивают срок действия предложения: «Купите новые шины. Только сегодня скидка 20 %».

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

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

Подробнее

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

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

Основы создания структуры документа в HTML 4

С процессом создания структуры документа познакомимся с помощью следующего примера:

<body>
 <h1>A</h1>
 <p>B</p>
 <h2>C</h2>
 <p>D</p>
 <h2>E</h2>
 <p>F</p>
</body>

Данный код создаст 3 раздела:

• 1 раздел определяется элементом и ассоциируется с заголовком «A» и некоторым контентом (параграфом «B»).
• 2 раздел определяется первым элементом и ассоциируется с заголовком «C» и некоторым контентом (параграфом «D»).
• 3 раздел определяется вторым элементом и ассоциируется с заголовком «E» и некоторым контентом (параграфом «F»).

Разделы 2 и 3 будут вложены в 1 раздел, т.к. их заголовки имеют более низкий ранг ( h1). Т.е. 1 раздел будет являться для этих разделов родительским. В свою очередь разделы 2 и 3 по отношению друг к другу будут братьями, т.к. они имеют одинаковый ранг ( = ). Но два этих брата для поисковых роботов не будут иметь равную значимость. Это связано с тем, что элемент, который встречается в коде раньше, имеет более высокую значимость для поискового робота, чем тот, с которым он встречается позже. Т.е. первый элемент будет являться по отношению к второму его старшим братом, а второй элемент по отношению к первому его младшим братом.

Представление структуры документа в виде иерархического списка

Структуру документа для наглядности удобно представлять в виде иерархического списка. При создании структуры будем использовать правило 2 пробелов. Т.е. если раздел по отношению к предыдущему является дочерним (имеет более низкий ранг), то к заголовку данного раздела будем добавлять 2 пробела. И наоборот, если раздел по отношению к предыдущему имеет более высокий ранг, то будем из его заголовка убирать 2 пробела.

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

h1
  h2
  h2

Основные правила при создания разделов в HTML 4

При создании разделов необходимо руководствоваться следующими правилами:

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

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже «Блокнот». Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в «Блокноте» каждую букву приходится писать вручную.

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

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

4 варианта создания структуры сайта

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

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

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

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов

Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д

Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по-умолчанию также радует;
Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

Другие уроки по теме «HTML и CSS»

• Адаптивная вёрстка галереи без JS. CSS target. Работа с изображениями — Retina img. HTML сниппеты #5
• Адаптивная верстка вертикального таймлайна. HTML Сниппеты #4
• Bootstrap 4. Сетка. Подробное руководство
• CSS Grid: адаптивная верстка реального макета
• CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
• CSS анимация для самых маленьких

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

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

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

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

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

Задания

1. Добавьте в вашу учебную веб-страницу информацию о версии HTML.
2. Добавьте данные о кодировке на вашу веб-страницу.
3. Добавьте в исходный код вашей учебной веб-страницы информацию о себе, как об авторе, в виде комментария.
4. Создайте ещё несколько HTML-файлов для Вашего будущего сайта: page1.html, page2.html, …, pageN.html, contacts.html, подготовьте и добавьте в них тексты. Не обязательно создавать оригинальные тексты и тем более не нужно их генерировать программно. Лучше, например, взять тексты из каких-нибудь старых энциклопедий или других книг (с истёкшими авторскими правами). См. также рерайтинг.

Принципы хорошей архитектуры CSS#

CSS-сообществу редко удаётся прийти к договорённости, что и как нужно делать. Даже если взглянуть только на комментарии с Hacker News или на реакцию разработчиков на выход CSS Lint, станет ясно, что многие не согласны друг с другом даже по поводу самых базовых вещей, которые стоит или не стоит делать при разработке.

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

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

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

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

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

Повторное использование

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

Поддержка

Когда нужно добавить или изменить новые компоненты или возможности, это не должно приводить к рефакторингу существующего CSS. Добавление компонента А на страницу не должно своим появлением ломать компонент Б.

Масштабируемость

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

Структурирование информации в базах данных

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

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

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

Правильно спроектированная база данных должна:

• Гарантировать целостность данных.
• Исследовать, находить и удалять противоречивости.
• Обеспечивать легкое восприятие.
• Позволять пользователю структурировать информацию и вносить новые данные.
• Удовлетворять требования производительности.

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

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