Need advice on ID vs. class, etc.

[Curtis]

This looks like a helpful NG.

We're pretty new to CSS and PHP, but we've nevertheless
undertaken the design of a simplified text markup
language--being dedicated free-market advocates, we
naturally call it "Marx." We'll probably open-source it,
though, as a contribution to O-S CMS projects.

Many here will be familiar BBCode, used for forum markup.
Our system is more like a subset of Textile, however, but
with a cleaner syntax. Design considerations are ease of
use, protection from malicious user input, cross-browser
compatibility, with scope of features trailing far in the
rear. It's meant to be a simple markup language, allowing
the basics--and tables, lists, image embedding--not be a
replacement for HTML. The basics are done.

Syntax is like so: *bolds* text, /italicizes/, _underlines_,
+strikes out+, etc. Rather than use an escape character like
\ to type an ordinary asterisk or plus, for example, like so
\* or \+ as some markup schemes do, one simply types the
character twice--after all, your finger is already on the
key!

The syntax is so simple that forum posters can learn it at a
glance. Article writers would require more capabilites, but
five minutes should be sufficient to learn everything. Even
complex entities like tables are a snap. Example:

..th Header1 | Header2 | Header3
.. Data11 | Data 12 | Data13
.. Data21 | Data 22 | Data23
.. Data31 | Data 32 | Data33

Doing this in HTML would easily require *seven times* the
markup keystrokes!

That much of Marx is essentially complete, i.e., simple
syntax that allows basic markup forum posting at one level
(Member), and article markup at a second level (Author),
which may include tables and images. What remains to be
completed is the Editor or Administrator level, where CSS
markup can be written into the page elements.

As it stands, an editor/administrator can style a paragraph
with

..es {color: blue}The paragraph text goes on, but with the
blues, oh yeah...

This embeds the style within the paragraph tag: <p
style="color: blue">The paragraph ...</p>

..cs p {color: blue}
.. table {margin: auto}

creates

<style type="text/css">
p {color: blue}
table {margin: auto}
</style>

Thanks for reading this far--I actually do have some
questions! (Please bear in mind that this text will be
translated into HTML for display--as a /portion/ of a larger
web page.)

1. Do we avoid giving *every* paragraph on the page "the
blues, oh yeah" with the .cs command by encapsulating the
Marxed output HTML with a <div id/class="marx" ...> ...
</div>?

2. (Note I say "id/class"--is there any reason to prefer one
over the other?)

It's easy enough to make this

..cs p {color: blue}
.. table {margin: auto}

come out as

<style type="text/css">
#marx p {color: blue}
#marx table {margin: auto}
</style>

if we use a div=, or if we use class= as

<style type="text/css">
.marx p {color: blue}
.marx table {margin: auto}
</style>

A little easier on the eyes. (The idea of either is to keep
a user from clobbering the whole page with styling
directives meant to be limited to a portion.) So is there a
reason to use one instead of the other in our div wrapper?

As I said, we're new to CSS, so any suggestions or advice as
to pitfalls would be immensely appreciated!

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Curtis]

if we use a div=, or if we use class= as

Oops. I meant id= here. I told you I was new to CSS.

The question was whether <div id="foofoo"> was preferred
over <div class="foofoo"> or not, among other things.


---

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[uranther]

Oops. I meant id= here. I told you I was new to CSS.

The question was whether <div id="foofoo"> was preferred
over <div class="foofoo"> or not, among other things.


---

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

id is for one-time use only. class is for more than one-time use only.
You can select both like so: <div id="special" class="global"> and that
is very useful for cutting and tightening your CSS.

 

[Leonard Blaisdell]

This looks like a helpful NG.

We're pretty new to CSS and PHP, but we've nevertheless
undertaken the design of a simplified text markup
language--being dedicated free-market advocates, we
naturally call it "Marx." We'll probably open-source it,
though, as a contribution to O-S CMS projects.

Good luck with all that! Whether your markup is better or not isn't the
issue. Unless it is revolutionary, it won't make a blip on anybody's
radar.

leo

 

[Curtis]

This looks like a helpful NG.

We're pretty new to CSS and PHP, but we've nevertheless
undertaken the design of a simplified text markup
language--being dedicated free-market advocates, we
naturally call it "Marx." We'll probably open-source it,
though, as a contribution to O-S CMS projects.

Good luck with all that! Whether your markup is better or not isn't the
issue. Unless it is revolutionary, it won't make a blip on anybody's
radar.

leo
[/QUOTE]


Leo, you're not exactly bursting our bubble. LOL

In a few years, when client-side WYSIWYG editors actually
/work/ worth beans, perhaps even BBCode will be retired on
rock-solid software like VBulletin, going the way of DOS.
But for now, there's still a place for plain-text markup, if
it's free or cheaper.

As for revolutionary, what would revolutionary markup code
even look like? If anything, a bit of our dot-command syntax
in principle goes all the way back to 1976 and before.

I'd say the most we can hope for is something a bit more
convenient than other solutions, a better fit for some needs
for a few years. I certainly didn't mean to imply that this
was some highly marketable killer app we were generously
donating to an eager world! I only added that bit to
avoid sounding like an advert, not to sound self-important.

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Curtis]

On Sat, 03 Dec 2005 18:05:53 -0800, Curtis wrote:

id is for one-time use only. class is for more than one-time use only.
You can select both like so: <div id="special" class="global"> and that
is very useful for cutting and tightening your CSS.

Not sure I follow you--I probably need some examples. But
I'll keep this in mind as I read some CSS tutorials next day
or two. I've seen the div-id-class all-in-one declaration
before, and don't quite get it's purpose yet.

But if using that will allow Marx markup users to employ
simpler CSS directives, I'm all for it.

Thanks,

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Barbara de Zoete]

Not sure I follow you--I probably need some examples.

Say you have a stylesheet for screen and one for printing. There are
certain parts of your page you don't want printed (like the meny, or
blocks with advertising, stuff like that). You also have parts in your
page that are unique (for every individual page), like a block containing
the navigation or a block containing the header of the page. What you
could do:

markup:
<body>
<div id="header">
<!-- content that makes up your pages header -->
</div>
<div id="content">
<!-- content that is actually the content of the page -->
</div>
<div id="nav">
<!-- the list with links for navigating the site -->
</div>
<div id="ads">
<!-- the third party advertising -->
</div>
</body>

Now, to avoid the 'nav' and 'ads' getting printed you could put in you
print style sheet:

#nav, #ads {
top:-1200px;
left:-1200px }

The more you get stuff that you don't want printed, the more extended that
list of id selectors and class selectors will get. You could also create
one class, like 'noprint' with the same properties, and add that one class
to all the elements that you don't want printed. With the <div id="nav">
and <div id="ads"> you would in that case get both an id and a
[class="noprint"].

Whenever you have some generic styles that you want to be able to attach
to what ever element, you can use a class and add that class where you
need it. You can combine classes, you can combine a class with an id. Just
be aware of what the cascade does with the styles, how one influences the
other, which has preference over the next, et cetera.

BTW: you use Outlook as your news client. It doesn't deal with signature
blocks very well (amongst other things). When you send a post, it deletes
the space after the dash dash that makes a correct signature seperator.
That means it is not properly seperated from the content. Also other
participants in newsgroups, as they reply to you, have to delete the
signature block by hand. Both are undesireable.
So, unless you use a proper news client (or something that is called
'quotefix'; google for that) you best _not_ add a signature block, because
it isn't a real one.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Alan J. Flavell]

In a few years, when client-side WYSIWYG editors actually
/work/ worth beans,

"What You See Is Not What Others Get". This is the design feature of
the web. Trying to factor that out is, I might say, the greatest
single cause of badly-conceived web pages. What You See Is Just One
Possible Rendering. There is - and there can not be - such a thing as
WYSIWYG web page design, unless and until you take away the very thing
for which the web was invented - namely, access to the same content
from a wide range of different browsing situations.

 

[Andy Dingley]

We're pretty new to CSS and PHP, but we've nevertheless
undertaken the design of a simplified text markup
language--being dedicated free-market advocates, we
naturally call it "Marx."

Why not call it "Wheel" ?

 

[Curtis]

"What You See Is Not What Others Get". This is the design feature of
the web. Trying to factor that out is, I might say, the greatest
single cause of badly-conceived web pages. What You See Is Just One
Possible Rendering. There is - and there can not be - such a thing as
WYSIWYG web page design, unless and until you take away the very thing
for which the web was invented - namely, access to the same content
from a wide range of different browsing situations.

I'm of two minds on this subject, Alan. While this is a bit
of a digression from my attempt to understand how to best
use CSS to extend Marx, I don't mind commenting.

People who produce online content are torn between the
desire to produce visually attractive content *from the
perspective of the /producer/* and the desire to make that
content viewable in ways that appeal to the preferences of
the /viewer./

I think both perspectives are valid. I'd like to present a
site precisely as *I* think it might be best represented,
but give viewers who see the world through different eyes
the option to choose. With style sheets and user selectable
themes, both can be accomplished.

But I concur that the WYSIWYG is, for the web, a relative
term at best. It is, however, quite valid to use "WYSIWYG"
Javascript-based editors to produce bold, italic,
font-choice, color, indenting, relative font sizes, etc.,
for content that will have a certain layout; however fluid
browsers might make the actual appearance--bold is still
bold, and indented is still indented.

I have nothing in principle against the JS "WYSIWYG"
editors. They're just too slow, take too long to download on
slow connections, and commonly break in browsers as late as
IE 5.X. When these problems disappear, or when browsers
build in this functionality in native code as opposed to a
pig-slow scripting language, I expect that BBCode and Marx
will not be of as much use.

Of course, there is the database size issue. If Wikipedia.
for example, stored its articles in HTML, its already
enormous database would be even more gargantuan. But it uses
a markup not unlike our Marx markup, which greatly reduces
overhead.

Writing about Marx markup on the WTT website, Nathan Hawking
gives the example of a table in HTML vs. Marx. To place a
single character in a cell in HTML requires *twenty some*
characters in HTML, as opposed to *two* in Marx.

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Curtis]

Why not call it "Wheel" ?

LOL Probably for the same reasons Firestone and Michelin
don't call it "Tire," Andy.

If we could have found something that did what we wanted the
way we wanted to do it, we would not have bothered. Textile
and Markdown came a bit closer than BBCode, but...

As Nathan wrote on WTT: If existing wheels are square,
reinvent the wheel.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Curtis]

...
...
Whenever you have some generic styles that you want to be able to attach
to what ever element, you can use a class and add that class where you
need it. You can combine classes, you can combine a class with an id. Just
be aware of what the cascade does with the styles, how one influences the
other, which has preference over the next, et cetera.

Thanks, Barbara. I'll be going through CSS tutorials in the
next day or two, and see if I can wrap my mind around this.
We won't need to complete the integration of CSS into Marx
markup for awhile, as it does everything we need at present.
But it would be nice not to make too many blunders when we
do. LOL A little knowledge is a dangerous
thing--emboldening, sometimes, but dangerous.

BTW: you use Outlook as your news client. It doesn't deal with signature
blocks very well (amongst other things). When you send a post, it deletes
the space after the dash dash that makes a correct signature seperator.
That means it is not properly seperated from the content. Also other
participants in newsgroups, as they reply to you, have to delete the
signature block by hand. Both are undesireable.
So, unless you use a proper news client (or something that is called
'quotefix'; google for that) you best _not_ add a signature block, because
it isn't a real one.

I'll look into that. Seems I'm regularly having to toss out
sigs manually when I reply to posts. Your post, for example,
had the -- and the sig fully intact and quoted, and I had to
delete it along with other portions of the text which didn't
need repeating, so I don't understand the problem--unless OE
has a problem on /both/ the receiving and transmitting end.

I though such need for manual deletions was just a fact of
posting life.

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[Andy Dingley]

If we could have found something that did what we wanted the
way we wanted to do it, we would not have bothered. Textile
and Markdown came a bit closer than BBCode, but...

So what's wrong with HTML, DocBook or TEI ?

Now pardon a possibly rude suggestion here, but if you're having to ask
what "id" and "class" are all about, you're not the most expert
authority on text encoding and the chances are that you're missing
something that already exists.

There's also the question of synergy. Now this is a hugely abused term,
to the point of meaninglessness, but Bucky Fuller was right about it.
There's a _huge_ synergy to using pre-existing tools and formats rather
than inventing your own. Are you _really_ sure that inventing another
new format is sufficiently better, and the other pre-exisiting choices
so limited, that you're actually going to be better off doing it this
way?

 

[Curtis]

So what's wrong with HTML, DocBook or TEI ?

Andy, perhaps you didn't read my original post.

Nothing is wrong with HTML, but it is far too verbose for
our purposes. My OP suggests why we're after something
different.

Now pardon a possibly rude suggestion here, but if you're having to
ask what "id" and "class" are all about, you're not the most expert
authority on text encoding and the chances are that you're missing
something that already exists.

Ignorance in one area implies nothing about judgment in
other areas. Feel free to read the OP and offer specific
suggestions, though.

There's also the question of synergy. Now this is a hugely abused
term, to the point of meaninglessness, but Bucky Fuller was right
about it. There's a _huge_ synergy to using pre-existing tools and
formats rather than inventing your own.

It's a grand idea in principle. In practice, however,
existing software "tools" often turn out to be
garbage--bloated, pathetically documented, so badly written
that making it work right takes far more effort than writing
the same functionality from scratch. Finding a really good
third-party add-on package often involves more work than
DIY, sadly.

Are you _really_ sure that
inventing another new format is sufficiently better, and the other
pre-exisiting choices so limited, that you're actually going to be
better off doing it this way?

Fair question. We may well have missed something, as we only
looked at and tested a dozen or so. (That, by the way, took
nearly as long as writing ~1000 lines of PHP code to produce
Marx.) In any event, the question is certainly one we asked
ourselves, and the fact that we wrote the program is our
answer, for better or worse. The horse is out of the barn.

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to ideas.

 

[dorayme]

Not sure I follow you--I probably need some examples. But
I'll keep this in mind as I read some CSS tutorials next day
or two. I've seen the div-id-class all-in-one declaration
before, and don't quite get it's purpose yet.

A simple strategy for you: until you come to see what id is an advantage for
and have a need for it or understand it: just use class.