С чем едят CSS. Тег style, подключение к HTML

CSS (что в переводе с английского означает - Каскадные Таблицы Стилей (Cascading Style Sheets)) - из названия понятно, что его главное предназначение - оформление чего-либо каким-то каскадным образом. С помощью CSS можно изменить, практически, любой элемент сайта до неузнаваемости (кроме тега <input type="file"> и элементов в <canvas> и WebGL) CSS к HTML странице можно подключить тремя способами: (способы расположены по возрастанию обоснованности использования) 1 способ: Записать CSS-оформление напрямую в теге. Например:
1
<div style="width:100px;height:100px;background:black;">
При таком способе записи любое изменение оформления сайта повлечёт за собой ощутимые трудозатраты по перезаписи оформления в каждом теге. Данный вариант следует применять только в крайнем случае. 2 способ: Записать CSS-оформление в отдельном теге, но в одном файле с HTML. Пример:
1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <style>
            div.my-button{
                background:#fc0;
            }
        </style>
    </head>
    <body>
        <div class=my-button> Text </div>
    </body>
</html>
Такой вариант записи CSS подходит только для очень маленьких проектов и на ранних стадиях. Такой стиль записи CSS плохо вписывается в его основное назначение - разделить логическую структуру документа. У этого способа есть преимущество - загрузка CSS будет происходить не отдельным запросом, а придёт вместе с ответом с сервера (не придётся делать дополнительные запросы). Это положительно сказавается на производительности, но плохо для читаемости исходного кода. И, наконец, 3 способ записи: Создание двух файлов(файл с логической структурой HTML документа, и файл с визуальным оформлением). Делается это следующим образом: Файл style.css:
1
2
3
4
5
div.class-name{
    width:100px;
    height:100px;
    background:red;
}
Файл index.html
1
2
3
4
5
6
7
8
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="class-name"></div>
    </body>
</html>
Такая форма подключения CSS к HTML документу является наиболее предпочтительной, т.к. логическая и визуальная часть сайта разделена, что позволяет улучшить читаемость документов. Всё это положительно сказывается на понятности исходного кода. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru