Насколько строго я должен отделять стили от HTML-кода?

Question

Каков наиболее распространенный или приемлемый способ расстановки приоритетов между чистым HTML-кодом и чистым CSS-кодом?

На мой взгляд, существует два возможных подхода ...

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

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

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

Редактировать: Вопрос не о встроенном CSS.Речь идет о том, как думать об использовании предопределенных классов CSS.Например ... если вы добавите класс, похожий на «w3-панель» к некоторым элементам div, то вы фактически добавите некоторое поле в HTML-код.Если вы вместо этого нацеливаетесь на эти элементы div, используя селекторы, вы не будете использовать html.

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

Answer 1

Это действительно зависит от вашего бизнеса приложения.

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

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

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

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

Answer 2

Лично я думаю, что лучше с самого начала разделить код как можно больше.(HTML для разметки, CSS для стилей и т. Д.).

Pro (+)

• Устранить неполадки проще
• Вы можете масштабировать, а затем добавить поддержкутакие инструменты, как SASS для CSS и т. д.
• Задача может быть разделена между людьми.
• Легче другому программисту понять настройку файлов.

Neg(-)

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

Answer 3

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