Results 1 to 7 of 7

Thread: It's time to ditch CSS... Thoughts?

  1. #1
    Join Date
    Aug 2013

    It's time to ditch CSS... Thoughts?

    CSS, in my opinion, has always been an awful system for laying out pages... almost absurdly so. There are so many aspects of the specification that simply do not make any sense (like how vertical padding and margin are relative to the width of the parent... what?), to the point that every time I try and use CSS I begin to question the sobriety of whoever came up with it. Almost anything you try and accomplish using CSS requires some sort of workaround involving nested divs, and ultimately you have to resort to javascript for certain features. Add to this the fact that it is implemented inconsistently across browsers, and that each browser requires some prefix for css properties (which means almost any of the new CSS3 features have to be written 3-4 times) and the result is a giant mess.

    So I decided to try a little experiment. Since I end up using javascript anyway to accomplish most layouts, I thought I might be better off ditching CSS altogether, at least for page structuring. I wrote a javascript library which parses layouts specified in XML files, and applies them to an HTML document using absolutely positioned and sized, non-nested divs. So the idea is that each page has an HTML file containing all content, an XML file specifying how that content should be arranged on the page, and a CSS style sheet used only for superficial styling.

    here are a few examples (tested in the latest version of all the major browsers):
    Example 1
    Example 2
    Resize the window to see the responsiveness of the system.

    The way I see it, internet/computer speeds are fast enough these days that if you can specify a layout system that works exactly how you want it to, and will render the same across all platforms, in under 50kb, why not? Why remain a slave to the major browsers ability to implement a system that was poorly designed in the first place?

    The most powerful part of this system is that anytime I want a new feature, I can simply implement it myself: I don't need to wait for the next CSS spec. And so far, in addition to designing my spec in a way that actually makes sense, I've added some very useful features not found reliably in CSS, such as:
    • The ability to easily align any element (including text) inside any other element, top/center/bottom, left/center/right.
    • The ability to float elements inside a parent from the left, right, top, or bottom. Furthermore the ability to stack the elements into the smallest possible space
    • The ability to set an element to fill remaining space in the parent, or split the space evenly with other filling elements.
    • When setting widths/heights in percentages, the ability to specify percent of width, height, or of the smallest dimension (%w, %h, %s), allowing easy creation of square elements.
    • The ability to easily set elements to be spaced apart evenly.

    Finally, the system is accessible and degrades gracefully such that if javascript is disabled, the user will still have access to all of the content.

    So what are you're thoughts on this method. Any possible pitfalls? Documentation for all of the features, as well as the source code are on github.

  2. #2
    Join Date
    Aug 2013
    Sorry, here is the second example, which demonstrates stacking from the top, while minimizing height. The yellow boxes fill available height in the stack.

  3. #3
    Join Date
    Nov 2002
    Flint, Michigan, USA
    You saved on divs in your HTML file by putting containers in your XML file; so?

    And it doesn't work properly in Opera unless the page is full-screen.

  4. #4
    Join Date
    Aug 2013
    Well its semantics... the content itself is not nested, you can see this if you view the page source. This means that the page is much more accessible using this method. And the XML containers are't tangible objects, they simply tell the layout engine how to place the real elements on the page.

    But that's not really the point... The point is, I don't think you would be able to recreate the examples using CSS alone.

    It is tested in Opera version 12.15. What version are you using? Obviously this is still in the early stages of development and there will be bugs to work out.

  5. #5
    Join Date
    Jan 2004
    chertsey, a small town s.w. of london, england.
    Hi there mbrown3391,

    It's time to ditch CSS... Thoughts?
    It's a very, very silly idea.

    If you are really going to ditch CSS, why do you have this...

    <link href="style.css" rel="stylesheet" type="text/css">
    ...in the head section of all your example documents?

    You can't have your cake and eat it.


  6. #6
    Join Date
    Aug 2013
    did you read the post? clearly not.

    I thought I might be better off ditching CSS altogether, at least for page structuring
    the idea is that each page has an HTML file containing all content, an XML file specifying how that content should be arranged on the page, and a CSS style sheet used only for superficial styling.
    Superficial styling means colors and fonts. If you look at the style sheets, you'll see that's all they do.


  7. #7
    Join Date
    Jan 2004
    chertsey, a small town s.w. of london, england.
    Quote Originally Posted by mbrown3391 View Post
    did you read the post? clearly not.
    I will admit that I succumbed to ennui after the first line of your diatribe.

    You asked for thoughts about ditching CSS and I gave you mine.

    If you want any other thoughts of mine, then I would have to say that
    you should feel free to pursue any crack-brained scheme of your choice
    that will solve your problems with CSS.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.10256 seconds
  • Memory Usage 2,906KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates