• j (unregistered)

    There was a time when our company bought (against my recommendation) a CMS product from some guys who knew nothing of HTML standards or even good style.

    Not a class or id to be seen, everything had a style= attribute no matter how many times it was duplicated.

  • ahhhhh (unregistered) in reply to jay
    jay:
    Chris V:
    Either my sarcasm detector is malfunctioning, or you sir are a contributor to problem. The loop is going to generate the same CSS regardless of individual item. You're STILL going to have to manually add code to customize specific items. The submitted code does nothing toward your stated goal of allowing for customization of individual items; it simply generates a ton of wasted CSS for no particular reason.

    Reading this makes we wonder if the programmer was thinking that down the road he's going to modify the loop to say things like:

    if $i == 1 || $i == 3
  color: #3f7;
else if $i == 9
  color: #b26; border-width: 2;
else
  ... etc ...

    Then I cried, too.

    though maybe if were more like

     
if $i % 2 == 1
  color: #3f7;

    or however you say that in php it would be somewhat sensible. Getting css to do what you want (especially across browsers) can be a pain in the ass.

  • qbolec (unregistered)

    TRWTF is CSS, which requires LESS or other preprocessor to achieve relatively simple goals. The CSS promise was to detach semantic from visualisation, by means of separating CSS from HTML. But, as one will very quickly notice, you can not realy separate them: you say "why he did not add a single .file class to all elements and style them altogether?" -- well, the answer is simple: because that would require changing HTML. If in your company the same person writes PHP and CSS, then this might get unnoticed, but once you have separate roles in team, it quickly becomes apparent, that the you have to separate PHP into "logic PHP" and "view PHTML" not only because it is more sane, but simply to avoid annoying conflicts in the repo by allowing CSS guys editing PHTML files.

    Similar story, when you want to share (mix-in) a fragment of a rule for two different selectors. CSS kind-of turns the whole inheritance-based code sharing known from OOP upside-down: if two things are similar, you would expect (based on experience from OOP world) that you will somehow declare that ".file1 is similar to .abstract_file" and ".file2 is similar to .abstract_file". That would allow you to spread these declaration among many small files, with reasonable scope. But in CSS, you have to gather all similarly styled but otherwise unrelated selectors in one place. It's like someone decided that a method in C++ should be followed by names of all Classes that implement it (or will implement it in future).

    Another problem is that you often have to add fake classes to HTML just to express similarity between objects to make the above issue simpler to solve. If you have 100 buttons in your app, 80 of which are square, and 70 of which are green, you have to either express this visual detail in your otherwise semantical HTML by adding class="square red" etc., or group 80 selectors in one place of CSS file, and 70 selectors in another place. The first solution seems to be advocated by Twitters' Bootstrap, where they have those silly "btn-green" or "input-xxl" and "span6" classes, which are just as stupid as were <font> , tags and colspan attribute.

    Surely, you can solve all this issues by using LESS or other preprocessor, but somehow I feel that these problem should have been solved in CSS itself, and not emulated by generating tons of redundant CSS in a quicker way.

    BTW. I do not really see a great difference in using LESS and using PHP for generating CSS (depending on situation in your company, it might have more sense to use a technology and language you already know, or use a tool maintained by other people).
  • (cs) in reply to qbolec
    qbolec:
    Another problem is that you often have to add fake classes to HTML just to express similarity between objects to make the above issue simpler to solve. If you have 100 buttons in your app, 80 of which are square, and 70 of which are green, you have to either express this visual detail in your otherwise semantical HTML by adding class="square red" etc., or group 80 selectors in one place of CSS file, and 70 selectors in another place. The first solution seems to be advocated by Twitters' Bootstrap, where they have those silly "btn-green" or "input-xxl" and "span6" classes, which are just as stupid as were <font> , tags and colspan attribute.

    "transitive absurdity"

    .red, .redSquare { /* make red */ }
.square, .redSquare { /* make square */ }
  • foo (unregistered) in reply to jay
    jay:
    How can you be sure that there are no unicorns if they're invisible? "I didn't see any invisible unicorns." Well, duh.
    Dunno about you, but I've yet to see an invisible thing that I can't see.
  • Guru Evi (unregistered) in reply to lscharen

    No, you write the CSS code correctly and if it doesn't work on a browser, blame the browser and tell them to get away from IE6.

    That or use an alternative style just for IE and tell them the fancy version is not supported by IE

  • lolatu (unregistered) in reply to qbolec
    qbolec:
    The first solution seems to be advocated by Twitters' Bootstrap, where they have those silly "btn-green" or "input-xxl" and "span6" classes, which are just as stupid as were <font> , tags and colspan attribute.

    I love how this has become some sort of standard. You aren't supposed to name variables by the value dontchyaknow...

    var ten = 10; var green = #0F0; var red = #F00;

    I don't like this color scheme anymore. So now var green = #00F; var red = #0F0;

    DOH!
  • Cyclops (unregistered) in reply to Anon
    Anon:
    TRWTF is Arial.
    Yeah, I could never understand what she saw in that crab.
  • Aaron (unregistered)

    Reading it down... "well okay, he has an inline style block before a php snippet and all the font-* declarations can be compressed into a single "font:". It's not that baaa....wait, is that php block in the style tag? It's dooooing what???"

  • jay (unregistered) in reply to lolatu
    lolatu:
    qbolec:
    The first solution seems to be advocated by Twitters' Bootstrap, where they have those silly "btn-green" or "input-xxl" and "span6" classes, which are just as stupid as were <font> , tags and colspan attribute.

    I love how this has become some sort of standard. You aren't supposed to name variables by the value dontchyaknow...

    var ten = 10; var green = #0F0; var red = #F00;

    I don't like this color scheme anymore. So now var green = #00F; var red = #0F0;

    DOH!

    Exactly. I fail to see any advantage of defining a CSS style of ".green {color: #0f0}" over "<font color='green'>". But people do it all the time. Any time I see a CSS style named by its attributes I cringe.

    The intelligent thing to do is to create CSS styles for, say, "error message", "navigation button", and so forth, and then attach the desired attributes to them. If today "error message" and "navigation button" both say "{color:red;}", fine, we have two things that have the same color. But if tomorrow the user says that they want navigation buttons to be blue, I can just change the attribute, not all the tagging. When CSS was invented, I thought that was the whole point: that I could create a document and attach styles to various kinds of things, and then if later I decided that my block quotes should be invented 20 pixels instead of 15, I don't have to groan, "Oh know, now I have to track down every block quote and make this change." I just change one place. And if it so happens that my bullet lists are also indented 15 pixels and I don't want to change those, fine. I just ... don't change them.
  • Bad code/Bad Style (unregistered) in reply to jay
    jay:
    lolatu:
    qbolec:
    The first solution seems to be advocated by Twitters' Bootstrap, where they have those silly "btn-green" or "input-xxl" and "span6" classes, which are just as stupid as were <font> , tags and colspan attribute.

    I love how this has become some sort of standard. You aren't supposed to name variables by the value dontchyaknow...

    var ten = 10; var green = #0F0; var red = #F00;

    I don't like this color scheme anymore. So now var green = #00F; var red = #0F0;

    DOH!

    Exactly. I fail to see any advantage of defining a CSS style of ".green {color: #0f0}" over "<font color='green'>". But people do it all the time. Any time I see a CSS style named by its attributes I cringe.

    The intelligent thing to do is to create CSS styles for, say, "error message", "navigation button", and so forth, and then attach the desired attributes to them. If today "error message" and "navigation button" both say "{color:red;}", fine, we have two things that have the same color. But if tomorrow the user says that they want navigation buttons to be blue, I can just change the attribute, not all the tagging. When CSS was invented, I thought that was the whole point: that I could create a document and attach styles to various kinds of things, and then if later I decided that my block quotes should be invented 20 pixels instead of 15, I don't have to groan, "Oh know, now I have to track down every block quote and make this change." I just change one place. And if it so happens that my bullet lists are also indented 15 pixels and I don't want to change those, fine. I just ... don't change them.

    That is the whole point. The problem is that people learn to treat the penalty for doing it badly and having to change it all over the place as a normal cost instead of as a result of bad style.

    For some reason, some people think using classes is supposed to mean you only type a certain attribute value once. Conceptually, it's supposed to be the opposite. You duplicate attribute values and keep your classes relevant to something bigger.
  • Chris (unregistered) in reply to Missus

    You could still "allow for future styling of the individual items" by giving the html elements a distinct class name or id there is no need to duplicate the same code for all the items, this is madness... pure madness it creates an unnecessarily bloated css file for the end user to download, whats the point?

  • Chris (unregistered) in reply to warlaan

    Why??? if you wanted to change the code on all the pages just create a class that is applied to all the elements you are trying to target, then change the styles in that one declaration, if you want to apply an overriding style on a specific file then just give it a distinct second class name or distinct id and apply the styles in there, this is much better than generating a bloated css file for no reason.

  • anonymous (unregistered)

    http://www.dilbert.com/strips/comic/2013-02-24

  • Erik (unregistered)

    I'd like to supply the following HTML-source snippet from Wordpress. It follows the same principle, but I wouldn't call Wordpress WTF:y...

    <article id="post-58813" class="post-58813 post type-post status-publish format-standard hentry">

    I think the idea is to be able to special design every post if needed. (Although I am not sure I'd like to do that with some 30 000 + posts on the site) :O

Leave a comment on “A Cascade of Failure”

Log In or post as a guest

Replying to comment #:

Log Out

« Return to Article