Весь CSS в таблице стилей как классы для экономии времени?

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

Например — Таблица стилей.

 <header class="darkredbg">

<h1 class="gold">Hello World!</h1>
</header

Код (CSS): Пример HTML:

 /*Red CSS colours*/ .lightsalmon{color:#FFA07A;}.salmon{color:#FA8072;}.darksalmon{color:#E9967A;}.lightcoral{color:#F08080;}.indianred{color:#CD5C5C;}.crimson{color:#DC143C;}.firebrick{color:#B22222;}.red{color:#FF0000;}.darkred{color:#8B0000;} /*Red CSS background-colours*/ .lightsalmonbg{background-color:#FFA07A;}.salmonbg{background-color:#FA8072;}.darksalmonbg{background-color:#E9967A;}.lightcoralbg{background-color:#F08080;}.indianredbg{background-color:#CD5C5C;}.crimsonbg{background-color:#DC143C;}.firebrickbg{background-color:#B22222;}.redbg{background-color:#FF0000;}.darkredbg{background-color:#8B0000;}

HTML: В будущих проектах мы просто применяем имена классов для создания макета и дизайна, а не добавляем новую таблицу стилей и снова добавляем все стили...

На самом деле, я могу лучше объяснить это на реальном примере, который я сейчас пишу для учебника, который пишу. Он готов на 90 %, осталось только добавить к нему модальное окно гамбургера.
https://cutcodedown.com/demos/dayNight/

Там обычные вещи.

.txt разметки для застенчивого «просмотра источника», таблиц стилей печати и экрана, копии, которая не загружает никаких стилей, и т. д. и т. п.

Как будет работать такой класс, как «darkredbg», если полностью изменить стиль БЕЗ изменения разметки? Будет ли это применимо, если ваша таблица стилей печати не предназначена для цвета?

Возьмем меню в качестве еще одного примера.

Я закодировал следующее:

 <div id="top">


<input type="checkbox" id="toggle_navHeader" class="toggle" hidden>


<header>


<h1><a href="#">Album</a></h1>


<label for="toggle_navHeader"></label>


</header>


<div>


<section>


<h2>About</h2>


<p>


Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.


</p>


</section><section>


<h2>Contact</h2>


<ul>


<li><a href="#">Follow on Twitter</a></li>


<li><a href="#">Like on Facebook</a></li>


<li><a href="#">Email me</a></li>


</ul>


</section>


</div>


<!-- #top --></div>

Код (разметка): С помощью этого CSS:

  <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below, the author, or any other background context.






Make it a few sentences long so folks can pick up some informative tidbits.






Then, link them off to some social networking sites or contact information.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark shadow-sm"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <svg xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> <strong>Album</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header>

Код (разметка): Если оставить в стороне UL и сосредоточиться только на LI и привязках, вы действительно предлагаете писать такую разметку?

 <li class="inline"> <a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1"> Home </a> </li> <li class="inline"> <a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1"> FAQ </a> </li> <li class="inline"> <a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1"> About </a> </li> <li class="inline"> <a href="#contact" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1"> Contact </a> </li> 

Код (разметка): Вы видите, где вся эта концепция «классов для всего» начинает идти вверх лицом вниз? Вот почему все эти фреймворки — bootstrap, попутный ветер и т. д. — это полный мусор, созданный людьми, не имеющими квалификации, чтобы написать ни единой чертовой строчки HTML или CSS.

Не смотрите дальше самого первого примера начальной загрузки:

https://getbootstrap.com/docs/4.5/examples/album/

Эти придурки даже нумерованными заголовками пользоваться не умеют! Серьезно, когда у них есть эта крушение поезда некомпетентности:

  #mainMenu { list-style:none; } #mainMenu li { display:inline; } #mainMenu a { display:inline-block; padding:0.25em 1em; text-decoration:none; background:#EEE; color:#000; border-radius:0.5em; border:1px solid #AAA; box-shadow:0 0.25em 0.5em rgba(0,0,0,0.2); transition:top 0.3s, box-shadow 0.3s; } #mainMenu a:focus, #mainMenu a:hover { top:0.1em; box-shadow:none; }

Код (разметка): Выполнение работы:

  <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">About</a></li> <li><a href="#contact">Contact</a></li> </ul> 

Код (разметка): Я поддерживаю ФАКТ, что люди, которые создают, работают над и поддерживают эти HTML/CSS-фреймворки, не имеют квалификации даже для того, чтобы открыть свои чертовы ловушки в ПРЕДМЕТЕ написания HTML или CSS.

И не имеют ли они права говорить, что «проще» или «проще», и если они используют эти слова, то они либо невежественные дерьмо, отчаянно нуждающиеся в четырехкратной порции Sierra Tango Foxtrot Uniform, либо они просто торгуют мошенничеством.

. В тот момент, когда вы видите h4 в качестве первого тега, несущего контент на странице, и класс с «белым текстом», вы видите невежество, некомпетентность и некомпетентность разработчиков! Я думаю, что смех заключается в том, что из-за того, что я говорю неприятные истины, которые разрушают его маленький пузырь эхо-камеры, ОП имеет возможность игнорировать мои сообщения. Вау-вау, кто-то грубо выражается и говорит, что все любимцы СМИ не правы!!!

Гэри говорит об этом вежливо; вы совершенно и полностью не смогли угадать ЦЕЛЬ CSS, цель HTML, а также то, как они должны использоваться/работать или почему они вообще существуют. HTML — это БОЛЬШЕ, чем просто то, как он выглядит на экране.

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

Вот почему HTML предназначен для того, чтобы сказать, что такое вещи структурно, грамматически, А НЕ ТАК, КАК ВЫ ХОТИТЕ, ЧТОБЫ ВЕЩИ ВЫГЛЯДЕЛИ!!! Если вы выберете ЛЮБУЮ разметку, чтобы указать, как она выглядит, включая классы и идентификаторы, вы можете с тем же успехом вернуться к написанию HTML 3.2 со всей той чушью, которая устарела из него, и устаревшими устаревшими глупыми приемами, такими как столы для раскладки!

Это называется отделением представления от контента, и с его помощью вы можете создавать несколько представлений из ОДНОЙ разметки.



Возьмем, к примеру, недавнюю вещь, которую мы можем сделать, — реализацию переключателя «темного режима». Что вы собираетесь делать, иметь class="gold", который в темном режиме становится черным? class="bgRed" который в итоге становится зеленым? То же самое касается программного обеспечения для создания скинов, такого как форумы.



Возясь с классами, чтобы определить, как все выглядит, вы только что создали мультискин (как на форумах), объявив презентацию в разметке!

Гораздо меньше когда-либо слышали о DRY? Не повторяйтесь? Этот тип методологии не делает ничего, НО повторяется по всей разметке, тогда как вы можете просто указать значение один раз в CSS, а затем сгруппировать его, как селекторы.



Вот как вы в конечном итоге получаете умственные пыхтящие карлики, такие как bootcrap, w3fools "w3.css", попутный ветер и все эти идиотские, тупые, сломанные "фреймворки", которые ругаются на удобство использования, доступность и просто здравый смысл с такого высокого уровня, что вы бы думаю, всемогущий только что вернулся из бочонка и в последнюю минуту должен был появиться, чтобы управлять «Рокфорд Персиками».

Именно его тип мышления приводит к такому трешу:

 h1 { background:red; color:gold; }

Код (разметка): С разметкой, сделанной людьми, которые говорят «семантика, что это такое» и требуют какой-то раздутой идиотской структуры

выполняю работу:

 <h1>Hello World</h1>

Код (разметка): хотя да, для этого нам нужно будет написать собственный CSS:

 #mainMenu { list-style:none; background:#000; } #mainMenu li { display:inline; } #mainMenu a { padding:0.25em 1em; text-decoration:none; color:#FFF; } #mainMenu a:focus, #mainMenu a:hover { background:#CCC; color:#000; }

Код (разметка): Мы не тратим время на создание класса для каждого проклятого элемента CSS.

Мы можем изменить внешний вид всего этого, даже не прикасаясь к разметке.

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

Но что еще важнее?

CSS может быть КЭШИРОВАН, а это означает, что в тот момент, когда мы загружаем более одной страницы, использующей один и тот же стиль, мы экономим пропускную способность, поскольку разметка становится меньше!

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



МОЖЕТ БЫТЬ, если бы люди перестали тратить 200 КБ разметки, 500 КБ CSS в дюжине файлов и 2 мегабайта скриптов, охватывающих два десятка файлов, чтобы выполнить работу, состоящую из 24 КБ HTML, 48 КБ CSS в ОДНОМ файле и 96 КБ JavaScript, возможно, в двух файлы, они не будут нырять за этими сломанными, недоступными методами, которые разрушают весь механизм, с помощью которого должен работать HTML!

Черт, просто посмотрите на свой собственный пример с

и классами просто так.

поскольку на странице должен быть только один H1, ему даже не НУЖЕН класс.

 <ul id="mainMenu"> <li><a href="#">Home</a> <li><a href="#">Home</a> <li><a href="#">Home</a> <li><a href="#">Home</a> </ul>

Код (разметка):

  <div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> 

Код (разметка): Они НЕ ПРИНАДЛЕЖАТ одному проклятому ФАЙЛУ.

Вот почему тег

Это задом наперед и вверх тормашками.

Вернитесь и перечитайте множество сообщений Джейсона @deathshadow, в которых снова и снова объясняется, почему предложенная вами методология не работает.

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

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

Не придумывайте несуществующие обоснования тому, что вы хотите.

Сначала нужно решить реальную проблему.

~г

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

 
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Код (разметка): SVG — это вишенка на торте, учитывая, что он просто выполняет отмену X, которую мы можем извлечь из utf-8... и роль aria MADE UP, о которой ни один законный UA не будет иметь НИКАКОГО понятия, что с ней делать.

. Я имею в виду FFS, насколько глупым можно стать, если у вас есть код, который читается ?!? Это так же нелепо и невежественно, как

 .alert { position:relative; max-width:20em; padding:1em 3em 1em 1em; background:#FDD; color:#C00; border:1px solid #C00; } .alert span { position:absolute; right:1em; top:1em; } 

Код (разметка): и этот CSS:

 <div class="alert"> <strong>Holy smokes!</strong> Something seriously bad happened. <span>&#x1F5D9;</span> </div>

Код (разметка): Опять же, просто примеряем значения с помощью заполнителей, а не сидим здесь, выясняя ТОЧНОЕ совпадение, но это хорошее представление.

331 байт в переписанном виде для HTML и CSS вместе взятых, по сравнению с 691 байтом в оригинале.

Даже если мы заменим SVG в оригинале на символ utf-8, они все равно будут иметь размер 318 байт.



и для чего? использовать раздутую структуру, которая сама по себе без минификации больше, чем должен быть CSS всего сайта? Чтобы оправдать фразу «вау-вау, я не знаю, хочу ли я попрактиковаться в HTML и CSS?» Как своего рода способ для ничего не знающих, которым я бы не доверял, завязать свои шнурки и выдать веб-сайт, непригодный даже для уничтожения? Чтобы полностью уничтожить любую возможность кэширования и заставить серверы и серверные программисты работать усерднее?



Черт, неужели нельзя использовать его во время нынешней нехватки TP из-за накопления придурков?

Опять же, /FAIL/ в самых основных аспектах написания чистого, эффективного и доступного HTML с правильным разделением задач.



... и становится еще хуже, когда вы понимаете, что они смешивают медиа-запросы метрик PX с волей-неволей смесью именованных размеров, px, pt и em. Опять же, «доступность, что это значит?» и почему дизайн Tailwind совершенно не работает на всех моих машинах, поскольку ни на одном из них не установлен размер шрифта по умолчанию 16 пикселей.



В тот момент, когда вы видите такой код:

 <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert"> <strong class="font-bold">Holy smokes!</strong> <span class="block sm:inline">Something seriously bad happened.</span> <span class="absolute top-0 bottom-0 right-0 px-4 py-3"> <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="[URL='https://lumtu.com/yti/dwccwdmdodHRwOi8vdzMub3JnLzIwMDAvDMw']http://www.w3.org/2000/svg[/URL]" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg> </span> </div>

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