2

According to this : CSS Performance between class and attribute selectors, I am wondering which would be the best way to quickly manage HTML display rendering with style rules.

By "best way", I mean the most readable/beautiful/acceptable.

Here is an example : I would like a <div> element to display like a table in an absolute position at x:25% and y:0.

To do this, I am more and more bored of defining class or id rules like this :

<div class="sthg"></div>
<style>
    .sthg {
        position : absolute ;
        left : 25% ;
        top : 0 ;
        display : table ;
    }
</style>

Even if classes allow to have groups of elements to stylize, this way looks too much specific for layouting our HTML.

And I wondered which way would be the "smartest" between those :

  • Using default HTML/CSS (as seen previously)

  • Using generic classes :

    <div class="table abs x1-4 y0"></div>

  • Using generic attributes :

    <div tabled abs x="1/4" y="0"></div>

  • Using new defined tags with generic attributes :

    <tabled abs x="1/4" y="0"></tabled>

    To read : Is there a way to create your own html tag in HTML5?

I know this looks tricky, but the goal to this would be to give more information in the HTML and lighten the CSS. Thus you won't need to read the CSS to understand how are positioned elements. HTML must be for managing layouts, and CSS for managing styles.

Here is a concrete example :

<body abs full>
    <tabled abs x="1/10" y="1/4" w="128" h="128"><cell>
        <div inline w="64">This is centered content with generic CSS.</div>
    </cell></tabled>
</body>
Community
  • 1
  • 1
Tot
  • 873
  • 2
  • 13
  • 30
  • 5
    "HTML must be for managing layouts, and CSS for managing styles." No-- HTML is for structuring data, and CSS is for managing how the data is displayed. – Interrobang Mar 25 '14 at 22:23
  • `abs` class just for `position: absolute;`? Doesn't seem logical to create a class for each single CSS rule. – Ali Bassam Mar 25 '14 at 22:25
  • My own formulation of @Interrobang's observation: HTML is for content, CSS is for presentation, and JavaScript is for behavior (although JavaScript wasn't mentioned) – yitwail Mar 25 '14 at 22:42
  • @Interrobang & @yitwail : That is true. But still, I think it would be interesting as it looks like Twitter Bootstrap way of doing (`class="span4"` or `class="row"`) with generic style rules. – Tot Mar 25 '14 at 22:48
  • _“Thus you won't need to read the CSS to understand how are positioned elements.”_ – but need to learn what the new pseudo-attributes or pseudo-element-names of your own invention mean? No thanks. And your “concrete example” puts way to much layout information into the HTML, IMHO – instead of doing that, you could use inline styles in the first place. (Would still be bad, but another person looking at it would at least know what they mean immediately.) – CBroe Mar 25 '14 at 23:04
  • And I personally would not consider Bootstrap an example of good practice either. Apart from their multitude of class names that have no inherent semantics, but rather just express what kind of visual effect is currently wanted (and thereby violate the principle of separation of concerns) … – CBroe Mar 25 '14 at 23:09
  • [cont’d.] … the way most negative aspect of Bootstrap and the like in my eyes is that they are breeding a generation of “CSS idiots”, as can be observed here on SO multiple times each day: People who don’t know how to solve the most basic problems with CSS if Bootstrap offers no default solution for it, or what they want differs ever so slightly from what Bootstrap provides … because they have no grasp of the very basic concepts of CSS. – CBroe Mar 25 '14 at 23:11
  • I'm not fond of Bootstrap either. However some class utilities as I proposed would be some shortened style rules instead of making complete themes and complex layouts as Bootstrap. Though what you wrote is quite interesting. :) But I somehow disagree with your very first reply. It sounds the same as saying you won't use jQuery because you have to learn how to use it instead of doing by yourself. Plus, `inline` for `display:inline` and `abs` for `position:absolute` looks intuitive. – Tot Mar 25 '14 at 23:23
  • In general, it is a bad practice to couple display logic to HTML, because you've then coupled your *structure* to your *design*. If you decide a table should no longer be positioned absolutely, you shouldn't have to modify the markup. That is bad design. – Interrobang Mar 25 '14 at 23:34

0 Answers0