Jump to content

Proposal


Alan Kellogg

Recommended Posts

I know one is supposed to keep CSS and HTML documents separate, but sometimes one does need to incorporate CSS into an HTML template. Such as when one wants to style an element in just one part of the site, instead of overall. So here is my proposal.

 

HTSS: Hyper Text Style Sheet. Not a combination of HTML and CSS code, but HTSS code. HTSS code would both tell what the element is (paragraph or font for example), but style it as well. There would be a single sheet with the appropriate codes ({Font: Chicago} for example) and whenever a person uses the Chicago font the tag {Font: Chicago} would be inserted automatically by a wys... editor, or would be hand inserted in a text editor.

 

HTSS would also include tagging for other properties, as needed. The goal here is to simplify lives. The grammer would be {Element: Style; (etc.). So for green text at 15 pts the tag would be {font: type: Chicago; size: 15pt; color: green}

 

What do you think?

  • Like 1
Link to comment
Share on other sites

There are some who argue that CSS is out of control and that laws need to be passed now before more damage is done. We now have CSS3 and tools like LESS and SASS making ever more frantic and complex attempts to keep content and presentation separate. Where will it all end?

Link to comment
Share on other sites

I know one is supposed to keep CSS and HTML documents separate, but sometimes one does need to incorporate CSS into an HTML template. Such as when one wants to style an element in just one part of the site, instead of overall.

What's wrong with giving it a unique ID? That's the whole point of them in the first place. Just don't use that ID anywhere else in your site. It shouldn't be that hard.

 

 

HTSS: Hyper Text Style Sheet. Not a combination of HTML and CSS code, but HTSS code. HTSS code would both tell what the element is (paragraph or font for example), but style it as well. There would be a single sheet with the appropriate codes ({Font: Chicago} for example) and whenever a person uses the Chicago font the tag {Font: Chicago} would be inserted automatically by a wys... editor, or would be hand inserted in a text editor.

 

HTSS would also include tagging for other properties, as needed. The goal here is to simplify lives. The grammer would be {Element: Style; (etc.). So for green text at 15 pts the tag would be {font: type: Chicago; size: 15pt; color: green}

I'm not really sure i follow or see the benefit / advantage.

 

 

There are some who argue that CSS is out of control and that laws need to be passed now before more damage is done. We now have CSS3 and tools like LESS and SASS making ever more frantic and complex attempts to keep content and presentation separate. Where will it all end?

I'm not sure if you understand how LESS/SASS work? I don't see what pre-compiling CSS has anything to do with how you implement CSS in your site, and CSS3 is just an improvement to the spec to add new features. You can still make it neat or a mess with or without a pre-compiler or with CSS2.1 or 3. As always, it's up to the technician to use his tools effectively.

Edited by thescientist
Link to comment
Share on other sites

W3 suggestions on separation:

 

http://www.w3.org/TR/WCAG20-TECHS/G140

 

I have read several amusing articles written on the topic of how much extra work and confusion are created by the difficult and unnatural goal of separating content from presentation -- when the whole goal is to provide simplification. So far I've only found one blog that I vaguely remember...

 

http://gadgetopia.com/post/8664

Edited by davej
Link to comment
Share on other sites

I understand the concept of separating content from presentation.

 

I design my HTML solely around the content, then use CSS on it afterwards. I provide class names and IDs to give meanings to my elements, elements with the same class name can then be styled the same.

 

A basic layout requires very little HTML when you use CSS to design it:

<body>    <header><h1>My website</h1></header>    <nav id="menu">        <a href="">Link</a>        <a href="">Link</a>    </nav>    <section id="content">        <h2>Section 1</h2>        <p>Lorem Ipsum</p>        <h2>Section 2</h2>        <p>Lorem Ipsum</p>    </section>    <footer>        <nav>            <a href="">Link</a>            <a href="">Link</a>        </nav>        <p>© 2014 Ingolme</p>    </footer></body>

With this code above I never need to change it again, and chances are that multiple pages of my website have this same code with slight differences. Now, by changing one stylesheet I can edit all my pages. If I want to make the menu on the left instead of on the top I just need to change the CSS and all my pages are updated at once.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...