Наследование класса в объявление id для css - есть ли какие-нибудь дискуссии по этому поводу?

Question

Я не уверен, где задать этот вопрос.Здесь, или консорциум w3, или ...

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

Со временем эта концепция, похоже, теряется.

Пример:

<div id="MainArticle" style="border:0px; margin:10px; width:80%; color:red; align:center;">

стал

<div id="MainArticle">  

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

Однако большинствона современных веб-сайтах вы видите код, похожий на:

<div id="MainArticle" class="col-md-9 col-sm-12 col-lg-8 MainArticleClass FloatingStyles OtherClass">

Который ИМХО направляется обратно в загроможденный беспорядок, который должен был удалить css.

Одним из способов решения этой проблемы может быть объявлениеdiv в css, а затем импортируйте класс в div, оставив в html только один идентификатор, например:

<div id="MainArticle">

style.css
#MainArticle {
 @import col-md-9, col-sm-12, col-lg-8, MainArticleClass, FloatingStyles, OtherClass;

}

Я бы предположил, что для загрузки чего-то подобного потребуется та же пропускная способность, что и для файла css, равного 99,5% то же самое, за исключением изменения в объявлении #MainArticle, но при удалении там объявлений класса будет уменьшен размер html - на общую сумму без дополнительных данных.

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

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

Есть ли какие-либо дискуссии вокругчто-то вроде этого?любые ссылки на статьи и т. д. будет принята с благодарностью.

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

например

.col-md-9, #MainArticle{
width:75%;
}

.col-lg-8, #MainArticle{
width:66.66%;
}

Answer 1

Вы можете использовать less или sass вместо css

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

http://lesscss.org/usage/

например

Файл CSS

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Альтернатива вышеупомянутойCSS

Меньше файла

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Для начала, свяжите ваши .less таблицы стилей с атрибутом rel, установленным в "stylesheet / less":

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Далее,скачайте less.js и включите его в тег элемента вашей страницы:

<script src="less.js" type="text/javascript"></script>

Редактировать:

Вместо использования меньшего файла с less.js лучше скомпилировать меньше файлаи используйте genrated css файл на веб-странице. Вы можете найти полезные примеры на

https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

https://mayvendev.com/blog/10-less-css-examples-you-should-steal-for-your-projects

Answer 2

Вот мои мысли по этому поводу.

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

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

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

В вашем примере похоже, что классы используются слишком часто, но у каждого есть свое назначение. Указание id фактически сделает этот элемент уникальным ... но так ли это на самом деле? Что произойдет, если вам понадобится точно такой же стиль в другом подобном элементе? Вы должны были бы изменить свой CSS. Что произойдет, если у вас будет почти тот же элемент? Вы должны будете дублировать класс и рефакторинг. Поддерживать уникальные элементы нелегко.

Импорт, расширение будет побеждать цель. Зачем это делать? Чтобы сохранить HTML в чистоте? Что произойдет, если вам потребуется изменить один класс, содержащийся в этом импорте? Вы должны были бы проанализировать все элементы, которые используют это, чтобы исправить это. Если вам нужно было выполнить весь этот импорт, почему бы не написать его с нуля?

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

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

Answer 3

Однако на большинстве современных веб-сайтов вы видите код, похожий на: <div id="MainArticle" class="col-md-9 col-sm-12 col-lg-8 MainArticleClass FloatingStyles OtherClass"> Который ИМХО возвращается в загроможденный беспорядок, который должен был удалить css.

Этот код ниже как-то оптимизирован,Вот еще одна часть кода, которую вы можете увидеть на многих веб-сайтах:

<div id="header-container" class="header-style-4 header-layout-fullwidth sticky-header-disabled  dfd-new-headers dfd-enable-mega-menu dfd-enable-headroom dfd-header-layout-fixed without-top-panel dfd-keep-menu-fixer animated--header small">

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

На самом деле, мы стремимся упростить разработку, чтобы не разработчик мог легко разрабатывать веб-сайт с использованием различных инструментов, инфраструктуры, CMS и т. д. Много кода генерируется автоматическисформируйте их, и мы все знаем, что создание оптимизированного кода не является чем-то тривиальным.

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

Выможно взять пример Boostrap, где у вас есть тонна классов для выполнения тонны вещей: https://getbootstrap.com/docs/4.2/utilities/

Итак, этот простой код:

div {
 display:flex;
 justify-content:center;
 align-items:center;
}

станет

<div class="d-flex justify-content-center align-items-center">

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

---

Одним из способов решения этой проблемы будет возможность объявить div в css и затем импортировать класс вdiv оставив только один идентификатор, требуемый в html, например

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

Как разработчику, вам нужно сделать выбор с самого начала.Либо вы планируете использовать Framework, CMS и т. Д., Чтобы упростить разработку и иметь подробный код, либо вы пишете чистый оптимизированный код, но вам потребуется больше времени на разработку и вы получите менее подробный код.

Iне думайте, что это сфера CSS, чтобы найти решение для подробного кода, который является выбором для разработки.