Databases
StackOverflow2013
Postsdbo
POIs it worth separating "style" from "layout" in CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it worth separating "style" from "layout" in CSS
    primarykey
    data
    text
    <p>One of my biggest trouble with CSS has always been how tricky it is to position stuff appropriately. </p> <p>Now matter how hard I try to understand things, I always need a couple of tries before I can guess which must be floatted in which direction related to what. </p> <p>Now, my trouble is, I usually at some point have code like this : </p> <pre><code>&lt;div class="someContainerThatWillWorkAsALine"&gt; &lt;div class="someOtherContainerThatWillWorkAsAcolumn"&gt; &lt;div class="StuffInAcolumn"&gt; ... &lt;/div&gt; </code></pre> <p>The only purpose of classes like this is to say :</p> <ul> <li>"child, please go from left to right"</li> <li>"except you guys, please go from top to bottom"</li> <li>"you, stop disturbing your brother and go 5px to the left, you're grounded"</li> <li>"johnny, you're the last of your breed, please clear all those floating nonsense" </li> </ul> <p>I sometimes come to wonder if I'm writing software, or trying to find the right way to turn the antenna to receive old-style analog TV. </p> <blockquote> <p>"Ok, just a little more to the right, please... No, not quite there yet. Perfect now, don't move !"</p> </blockquote> <p>Besides, those classes have no real semantic, so it's <em>very</em> hard to give them a meaningful name. This makes CSS pretty hard to read, and, even worse, pretty hard to <em>write</em> because I get a panic attack every time I have to choose a name for "yet-another-class-that-simply-tells-a-block-to-act-as-a-line". Because as every class name is global to your web2.0-y-one-page-site, you don't want to collide with used names.</p> <p>So how do you tackle this kind of problems ? Do you : </p> <ul> <li>leave the "positioning" (layout?) css code inline with your html, and restrict CSS to actual styling (as in "this should be blue, this should be written in bold, etc...") ? </li> <li>simply have one "act-as-a-line" and "act-as-a-column" class (meaning your html code contains classes that only deals with layout), which kinda defeats the "keep layout out of my html" spirit ? And give a more meaningful class for other cases ?</li> <li>use a convention for the names ?</li> </ul> <p>Any ideas welcome.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USphtrivier
    1. USphtrivier
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIs it worth separating "style" from "layout" in CSS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIs it worth separating "style" from "layout" in CSS
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POIs it worth separating "style" from "layout" in CSS
      1. USk0pernikus
      1. VTFavorite
    1. COI think [this article](http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) addresses many of the points you raise far more eloquently than I possibly could.
      singulars
      1. POIs it worth separating "style" from "layout" in CSS
      1. USmagicalex
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload