У меня есть несколько заметок, которые я пишу о HTML и CSS, пока я их изучаю.Я переписывал тысячи строк много раз по ходу дела и проводил много раз в кругах по следующей проблеме:
Я хочу создать элемент, например, блок кода, следующий за ним в непосредственной близостик пункту перед ним, потому что они связаны.Раньше я делал это следующим образом, HTML:
<p>This introduces the following:</p>
<code class="block close"> <!-- Pay attention to this line, going to change it below -->
var a = 1;
var result = 2 * a ;
</code>
, соответствующий CSS:
p, code.block {
margin: 1em 1em 0 1em;
}
.block { display: block; }
.close { margin-top: 0; }
Что мне не нравится в вышеприведенном:
Для добавления стилей к предметам используется множество классов.Вместо этого стилизация почти становится частью HTML (BAD), как в этом вопросе, в результате вы получаете «объектно-ориентированный CSS» CSS-стили с использованием пользовательских атрибутов, чтобы сделать его более читабельным.хорошо или плохо? :
<button color="fg-green bg-white"
border="red thick dashed"
hover-color="bg-grey fg-black"
hover-border="blue">
</button>
Имена классов должны обозначать функциональное значение, а не описывать стиль.
- Множество имен классов делает егосбивает с толку отслеживать все стили.
Позже я подумал, что попал в святой Грааль, когда обнаружил пользовательские атрибуты, и изменил его следующим образом: HTML:
<code block close>
Проблемы с выше:
- Позже я узнал, что вы можете использовать свои собственные атрибуты, только если они начинаются с «data-» (из этого поста: Можно ли добавлять свои собственные атрибуты в элементы HTML? )
Итак, я изменил его следующим образом, HTML:
<code data-block data-close>
Проблемы с выше:
Очень многословно.После прочтения https://justmarkup.com/log/2017/07/my-approach-on-using-id-class-and-data-attributes-in-html-css-and-javascript/: Автор использует данные в основном в JavaScript, а также в CSS для различных состояний.Это имеет смысл для меня, поскольку это атрибут данных, а не атрибут стиля.
Позже я прочитал: https://discourse.wicg.io/t/relaxing-restrictions-on-custom-attribute-names/1444 В каких состояниях angular используются пользовательские атрибуты, почему мы не можем?Они рекомендуют начинать пользовательские атрибуты с подчеркивания или двух символов и тире.
Итак, я изменил его следующим образом: HTML:
<code _block _close>
Я подумалЯ закончил, наконец-то пришел к решению, но оно не прошло проверку W3C HTML-проверки (я думаю, это не удивительно).
Так что теперь, прежде чем я потратил 2 часа, переписывал свои заметки, чтобы быть похожими (и, вероятно, изменится)снова там после):
<code class="_block _close">
Прежде чем кто-то закроет этот вопрос, потому что он "слишком субъективен", может кто-нибудь предложить понимание, как добавить атрибуты стиля таким образом, чтобы не загромождать HTML-атрибутыописание стиля, хотя его можно обслуживать.
Например, вот некоторые другие «атрибуты» стиля:
code._block {display: block padding: 0.5em}
._close {margin-top: 0.25em}
._far {margin-top: 2em}
._nb {font-weight: bold color: yellow}
._strike {text-decoration-line: line-through}
._compact {font-size: 0.8em}
Примечание из моего исследования: я не особо хочу использоватьSASS, но я думаю, что если бы можно было определить стили, а затем связать эти существующие стили с другими стилями, это решило бы вышеупомянутое, что я прочитал, чего нельзя сделать в обычном CSS.