2

I feel this is somewhat of a philosophical question, but for the sake of keeping things grounded (per Stackoverflow requirements), here is a specific case in which the answer to this general question would be helpful:

I want to insert space after a styled element. How can I do this properly?

I’ve identified a few ways in which I can add the space:

  • Create a “spacer” div
  • Create a “margin-X-px” helper class and append the class to the element’s class attribute list
  • Set the margin property of the style attribute of the element within HTML
  • Create an "ID" for the element and add the margin with vanilla CSS
  • Sub-class the styled class with vanilla CSS
  • Use SCSS @extend to sub-class the styled class and absorb this into one class attribute

With a number of CSS frameworks becoming the norm, I am seeing code which may traditionally be considered "incorrect" due to a mixing of concepts. I've noticed that these infractions tend to occur as part of a tradeoff between modularity and simple semantics. To me, it appears as though style and structure are inherently dependent upon one another. For example, one may need to create a parent DIV structure for the sole purpose of inserting some style.

Personally, I feel it makes the most sense to do whatever is most semantic for one's required modularity needs: If there were no need for modularity (one-shot class), I would append to the "style" attribute within the actual HTML until a point was reached in which the meaning of this code could be made clearer by abstracting into a CSS class. If I planned to re-use this element, I may make a CSS class for even a simple element which could be expressed semantically in the "style" attribute.

What are your thoughts regarding this approach?

Thank You!

Veita
  • 509
  • 1
  • 5
  • 16
  • 1
    "I want to insert space after a styled element. How can I do this properly?" I would say that depends on why you want the space. What purpose does it serve? Is it a reusable? If it's one-off, does it represent a deviation from the design? I don't think there's a universal solution. – Alexander O'Mara Nov 18 '15 at 08:02
  • Might be [this](http://stackoverflow.com/questions/8184958/add-space-between-html-elements-only-using-css) question would help you... – Domain Nov 18 '15 at 08:07
  • Thanks! I really like this as a solution to the specific-case question, as it appears to separate concerns well: At first, I believed this approach would bring structural information into the CSS, but I realize now, that this CSS is not indicating the creation of any *new* structure, but only generates *new* style between structural elements. This is in contrast to the HTML approach (without ID / sub-classing) which actually does indicate the creation of new style within the HTML. – Veita Nov 18 '15 at 16:05
  • I understand that there is no solution for all cases, but how would you express the generalized process used to determine a good solution? I like to visualize the problem as a neuron model: Construct a vector with a weight for each of the following features in the scope of the code. Construct a vector of inputs which represents how well each feature has been self-actualized. Dot these vectors and threshold to determine if the objective function has been adequately maximized. Example features include: Separation of concerns, Code semantics, Re-use requirements – Veita Nov 18 '15 at 16:46
  • My question then becomes: What other features would you suggest I use in my optimization function? – Veita Nov 18 '15 at 16:53
  • Hmm, I've been trying to work with (elem1 + elem2) example given above, and I just wanted to warn that this may not be as great as I initially believed. There is a problem: Although there is separation of concerns, modularity is compromised, as now all elements in the site which follow this structure will have the effect activated. This is difficult to debug, unlike one-off style in the HTML. – Veita Nov 18 '15 at 18:13

0 Answers0