The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS in theory vs practical approach

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #31553

    I’m building a website and, contrary to most of the times where “if it looks OK, it’s OK” is the reasoning, I was thinking:

    the idea of CSS is to ensure that 1 HTML page can be shown in totally different layout, without changing the HTML code itself. Let’s give it a try…

    Turns out that you quickly encounter some problems.
    – 960 grid system? No can do. You need to specify some fixed class-names to set the width of the blocks.
    – other grid systems: same problems, as far as I know
    That seemed pretty obvious to me, and not a major hassle.

    Second approach: define some own classes that would set the width of similar items. Oh – no. Same problem of course. What if you want a certain block to be wider (or taller or …) in the other layout?

    As far as I can see, I’m pretty much forced to add an ID to many items, and define the layout of that item by ID instead of using classes.

    And, as we all know, THAT is not the advised way of writing CSS.

    Most of the other forums would yield only uninteresting replies to this kind of ‘problem’. I’m hoping that a very dedicated and specific forum as this could give me some interesing insights. How would I need to approach this? Is it even possible?

    Just to start the discussion and make it a bit more practical, let’s say that we’re talking about a very simple page:
    – header
    – footer (needs to be sticky)
    – main with different blocks: “about me”, “contact me”, “see my portfolio” and “blog”. In one layout, I may want to put “see my portfolio” on a single row all by itself, in the other layout I may want to but the 4 blocks in 2 rows and 2 cols…
    I’m thinking that in onle layout I may want a fixed width, and in the other layout a fluid layout.

    Is that possible, at all?


    I think your initial reasoning is spot on but your simple page is actually one of the more complex pages to style (IMO)).

    I think I would target the ‘problem’ in this way:

    • All containers with similar content be of the same class (like Widgets, or Meta data – posted by xxx on xx/xx/xx).
    • Larger sections labelled semantically (either using HTML 5 Header, Footer or ‘div’s with id’s of header, footer

    Everything else could be targeted based on their location. By this I mean selecting ‘widgets’ in the ‘footer’ or using pseudo selectors like ‘:nthchild’ etc.

    I was going to write more on this, but I have to now go – hopefully a few more may comment on this topic, as keeping the HTML semantic, and adding enough hooks for CSS can be tricky – just adding an ID feels like cheating :-)


    The HTML that I create is usually super similar on a project to project basis and the sites never look similar. CSS is very powerful that way.

    I’m not really sure what you’re looking for here, you seem to understand the concept just fine.


    all, thx already for your replies.
    Wolfcry911 – thx for the code. Works a lot easier if we have something “real” to discuss.
    I get your point about adding 1 class to the (although one could argue that this is also messing with the html, but OK, it’s only a small change :))

    Question which makes it harder though (and I’m really thinking about my 2 layouts that I have made): what if you’d want the “about me” to be the first box in one design, and to be the last one in the other design (or, more generally: if you want to reorder your items). And if you want the first box and the last box to span the whole page, and the two middle ones to be half the page each?
    That would force you to add ID’s to all 4 , and then add widths to each seperately. same for all other

    The whole “problem” I’m facing (or better: I’m struggling with the difference between theory and practical approach) is that it soon turns out that using classes for some “generic” formatting is pretty unworkable. Unless, again, I’m missing something.

    Maybe I’m thinking about it too hard this time. It may be a better idea to just back down to “if it works, fine by me”. :)


    You can reverse the order of the items by floating them the other way. However, you won’t be able to mix up the order.

    If you wanted the first and last to be 100% width and the two middle ones the be 50%, I would do this (If I wanted to avoid the html): #content div{width:50%;}
    #content div:first-child, #content div.last-child{width: 100%;}


    yes, CSS was made to “separate structure from design” as you say. That, in an ideal world, means that your html (structure) should not need to be changed to have a different layout.

    The reason for all of this is that I was having 2 designs for one page, and I was thinking of converting both of them to html just to show it to some people and ask their opinion. That lead me to the question: would I be able to do this, with one html file? Given that in one design the “who are we” is above the other content, and in an other design we’d put the “who are we” below other content (which should normally be more important to the visitor). I was just wondering if my understanding of CSS was too limited to achieve the goal or if (in a real world) the theory of CSS is rather flawed. Yes, you can seperate layout from structure, but only in a rather limited way.

    I know “LESS”, which fixes a major part of the problems of CSS. I know CSS Zen Garden (which is outdated and still rather minimalistic in layout).

    In real world designs, your html is mixed with how and where you’d want to show items. Altough it’s impressive (or at least interesting) to browse through the templates available at (?) and have a look at how they achieved some things.

    Such investigation made me doubt between adding a background to the “body” tag instead of adding it to the ‘header’ and ‘main’ div seperately (which is how I would do it). Still wondering which approach is the most flexible… but at least it’s interesting to think it over.

    From your feedback, I guess the feedback is: never mind – you’ll always have design decisions in your html already (though I did see some css to ‘pick up’ the horizontal menu from the bottom of the html and put it on top of it – forgot where that was though :))

    e.g. I always find it strange to have artificial divs in my html such as

    Where the “wrap” ensures that you can have a sticky footer (and a background etc), and the “page” then sets the margins+width

    Or code that has



    You could change the names of the classes, but you’re always forced to add elements to your html just to be able to put a box around 2 items etc… that is mixing design and structure.

    I don’t mind about normally, just on this occasion I was wondering if I was missing something. Seems I wasn’t – it’s just the way it is :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.