1

I have some notes I have been writing about HTML and CSS while I learn them. I have re-written thousands of lines many times as I go along, and spent many times going in circles about the following issue:

I wish to make an item, e.g. a block of code follow on in close proximity to the paragraph in front of it because they are related. I used to do it as follows, 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>

matching CSS:

p, code.block { 
    margin: 1em 1em 0 1em;
}
.block { display: block; }
.close { margin-top: 0; }

What I dont like about the above is:

  1. One uses lots of classes to add styles to the items. The styling almost becomes part of the HTML instead (BAD), like in this question, you end up with "object orientated CSS" css styling using custom attributes to make it more readable. good or bad?:

    <button color="fg-green bg-white" 
        border="red thick dashed" 
        hover-color="bg-grey fg-black" 
        hover-border="blue">
</button>

  2. Class names should denote functional meaning, not describe the style.

  3. Lots of class names makes it confusing to keep track of all ones styles.

Later I thought I hit the holy grail when I discovered custom attributes, and changed it to as follows, HTML:

<code block close>

Problems with above:

  1. I later learnt you can only use your own attributes if they start with "data-" (from this post: Is it OK to add your own attributes to HTML elements?)

So then I changed it to as follows, HTML:

<code data-block data-close>

Problems with above:

  1. Very verbose. After reading https://justmarkup.com/log/2017/07/my-approach-on-using-id-class-and-data-attributes-in-html-css-and-javascript/: The author uses data- I primarily in JavaScript, but also in CSS for different states. This makes sense to me, since its a data attribute, not a style attribute.

  2. Later I then read: https://discourse.wicg.io/t/relaxing-restrictions-on-custom-attribute-names/1444 Which states angular uses custom attributes, why cant we? They recommend starting custom attributes with an underscore, or two characters and a dash.

So then I changed it to as follows, HTML:

<code _block _close>

I thought I was done, finally came to a solution, but it failed W3C HTML validation check (I guess no surprise).

So now before I spent 2 hours re-writing my notes to be like (and probably will change again there after):

<code class="_block _close">

Before someone shuts down this question because it is "too subjective", could someone please offer insight into how to add styling attributes in a way that doesn't clutter ones HTML with the describing the style, while still being maintainable.

For example, here are some other styling "attributes":

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}

Note from my research: I don't particularly want to use SASS, but I think if one could define styles, then link those existing styles to other styles, it would solve the above, something I read which can't be done in normal CSS.

run_the_race
  • 1,344
  • 2
  • 36
  • 62
  • 1
    If you want to apply styles to just any code block that follows a paragraph, p + code. (Ideally, this code element should be in a pre, or figure > pre.) No need for additional bulk. – BoltClock Oct 20 '18 at 15:05
  • 1
    Do you mean something like BEM http://getbem.com/introduction/ – SuperDJ Oct 20 '18 at 15:22
  • @BoltClock, I think that's a good solution thank you. Would the html look something like:
    This is a leading paragraph:
    e = m*c**2;
    . I think it could work, except I would prefer both the code block as well as other (inline-block) code items to be styled by the same tag, which I could change to a class (less ideal), so maybe something like:
    This is a leading paragraph:
    e = m*c**2;
    , and then style as you recommended with figure > code.     – run_the_race Oct 22 '18 at 18:13
  • @SuperDJ That is a brilliant naming convention, I will start using it, thank you for introducing me to it! – run_the_race Oct 22 '18 at 18:14
  • @run_the_race Sure no problem. It has helped quite a lot not only for cleaner CSS but also for naming – SuperDJ Oct 22 '18 at 18:25

1 Answers1

0

I've not really understood the point. My answer is to use the things for their role, so if You need to attach some data use data-attributes, if you need to style elements use classes. Is right to use both at the same time, for examples if You need to get the state in your script, use data-attributes, neither if she styles change or not.

HTML The class Attribute

The HTML class attribute is used to define equal styles for elements with the same class name. https://www.w3schools.com/html/html_classes.asp

HTML data-* Attributes

The data-* attributes is used to store custom data private to the page or application. https://www.w3schools.com/tags/att_global_data.asp