Extending a class

Help on extending a class without writing a new one

[ckosloff]

I have a class already defined, say "example1".
I am attempting to modify a PHP script which is very messed up because sometimes the author uses this class (or similar ones) along with deprecated HTML elements like align="right" or "center", etc.
Also valign="bottom", "top", etc.
I want to kick out all the deprecated tags and replace with CSS.
Is it possible to extend the class or do I have to right a new one that will include an extra declaration:
text-align:right, for example?
If so, I would have to right new classes for right, center, top, bottom...
Any suggestions?

[rocknbil]

You mean as in a class that picks up the align attribute as a selector of sorts? I've never heard of that . . . since you have to pull the deprecated attributes anyway, might as well add a class to the style sheet. You'll have some challenges with valign though, but any improvement is better than nothing. :-)

[alt131]

Hi and welcome to WebmasterWorld ckosloff

I want to kick out all the deprecated tags and replace with CSS

That's got to be good ;)

I wonder if would be worth consolidating the css rather than just adding more classes, but in the interim, multiple classes might help. Older browsers may have buggy implementation, so need to test, but I've never had too many issues:
For example:
.example1 {styles here}
.example2 {text-align:center}
<p class="example 1 example2">

I'd also look at pattern matching [w3.org] options. Depending on the HTML structure, and what browsers your users are using, you may be able to select specific elements via descendent, child, sibling, attribute, etc to avoid creating lots of new classes.

If your users have modern browsers css3 [w3.org] selectors offer even more ways to select elements (things like last-of-type, etc) without having to class.

[ckosloff]

Thanks for all answers.
I will explain further.
I am working on the revamping of an add-on to a shopping cart, so I don't want to touch the core file, to facilitate uninstallation.
I will create an additional stylesheet, that can eventually be deleted during uninstall.
All the classes are already in the core stylesheet.
The problem lies in the fact that the original author, back in 2006, used deprecated tags to position those classes. e.g.
<td class="example1" width="50" align="center">bla</td>
To eliminate the deprecated <align> attribute I would have to create 3 new classes, just to include {text-align:center;}, right, or left.
Or create new classes with just that attribute, that I could use with example1 or other similar classes in the core stylesheet.
Let's call that new class textAlignCenter.
So, basically my question is if this syntax is correct:
<td class="example1" "textAlignCenter" width="50">
The W3 is The Bible, but not very user-friendly.

[alt131]

Hi ckosloff,

So, basically my question is if this syntax is correct:
<td class="example1" "textAlignCenter" width="50">

No, that won't work - you need the syntax from the above example, so your td would become:
<td class="example1 textAlignCenter" width="50">

However, my concern is to avoid replacing the deprecated attributes with lots of classes and create "classitis".

Classitis is not as bad, but something to avoid as the point of css is to be efficient. If you look at the structure of your HTML, you may be able to use selectors to select elements, which means you can avoid creating extra classes, and also avoid writing them into the HTML as well. Do have a look at the w3 - it seems a challenge but it quickly becomes easy, and you can come back here for clarification ;)

Anyway, some egs to get you going.
Say you look at your html structure and discover that the
<td class="example1" width="50" align="center">bla</td>
are all children of a tr called "centeredtablerow" (unlikely, but you get the point)
Your css becomes:
.example1 {styles}
#centeredtablerow .example {text-align:center} <-- descendent selector
Remove the align="center" from your HTML, but because you have targeted the td using the classes of the elements that lready exist in the HTML there is no need to create a special class in your css, or write it into your html: One step saved.

Or it might be that all the width=50 td's have been centre aligned. So (if your target users are using browsers that would understand) your css becomes:
.example1 {styles}
td[width=50] (text-align:center} <-- attribute selector
Again, remove the align="center", but no need to add anything extra to the HTML because you've applied the text-align to all the td's already.

Or if the centred td's are the first td in every row:
.example1 {styles}
tr:first-child: (text-align:center} <-- first-child pseudo-class

... and so on ;)
[edit]For clarification[/edit]

[ckosloff]

Thank you very much for detailed answer.
To tell you the truth I still find hard to follow certain explanations:
"Your css becomes:
.example1 {styles}
#centeredtablerow .example {text-align:center} <-- descendent selector"
Aren't you mixing classes and IDs?
Where does "example" come from, shouldn't it be example1?

Anyway, let me rephrase, I am not writing a full stylesheet, just an extension to the main one, to be imported.
The only things that need to be there are the "text-align" and "vertical-align" selectors, so I can reuse them in all the instances where the "align" and "valign" HTML tags are used.
It would be a very small stylesheet, and would cover all the instances of those tags.
I think that I will take that route if you confirm the following:
Say that class .BigFat is in core stylesheet, and class LeanPosition in the additional one.
So the correct syntax would be:
<p class="BigFat LeanPosition" width="50">bla</p>
If that syntax works I will set everything up without further ado, and will get into all the finesses of the W3 later, promised.

[ckosloff]

I don't like the script used for this forum, too old, cannot edit.
class LeanPosition should be class .LeanPosition.

[alt131]

#centeredtablerow .example {text-align:center} <-- descendent selector"
Aren't you mixing classes and IDs?
Where does "example" come from, shouldn't it be example1?

That should read:
#centeredtablerow .example1 - good spotting ;)

This selector tells the browser to apply the stye to an element with a class of .example1, when that element has a parent with an id of #centeredtablerow. The HTML would look like this:
<tr id="centeredtablerow"> <-- parent
<td class="example1"> <--child (that the style is applied to)</td>
</tr>
The css selector could also be written like this:
tr#centeredtablerow td.example1{styles here}
Which only applies the style to a td with a class of .example1, and only when that td has a parent tr with an id of #centeredtablerow.

Say that class .BigFat is in core stylesheet, and class LeanPosition in the additional one.
So the correct syntax would be:
<p class="BigFat LeanPosition" width="50">bla</p>

That's it! ;)

I do understand that you are writing an additional, smaller stylesheet. My suggestions have been aiming for two things:
1. Keep the additional style sheet as small as possible.
2. Change as little HTML as posible. <-- this is probably the key saving in this situation

No need to get caught up in the finer points - but they are soooo powerful you will want to ;) Even if you are only dealing with the deprecated alignment attributes, some of the basics will save you time, reduce "classitis", and minimise editing the html. Say part of your HTML looks like this:

<div>
<p class="BigFat" align="center" width="50">bla</p>
<p>bla bla</p>
<p class="smallskinny" align="center" width="100">bla bla</p>
</div>

Instead of creating the class .LeanPosition in your css and then changing the HTML to read
<p class="BigFat LeanPosition" width="50">bla</p>
AND
<p class="smallskinny LeanPosition" width="100">bla bla</p>
You can just write a css style:
div p.BigFat, div p.smallskinny {text-align:center}
Which applies to both so saves lots of time. Plus, when you are modifying or improving things in the future, you don't have to remember which class has been applied to which elements, or change the HTML to remove the old classes ;)

You should be able to edit posts for about 15 minutes - use "owner edit" in the left column

[ckosloff]

Thanks so much, you made things really clear.
I will keep this post to use in the future, when I craft something.
In this particular case, I need to keep changes to the minimum, for several reasons: I will be modifying a core file of the add-on (not the big core of the app itself).
Users of these files are no wizards, mostly do-it-yourselfers (like me!).
To reuse a class throughout the core file will minimize changes, so it will be easy on the users and simplify future updates.
Fancy constructs are fun and challenging, but only if devs will be reading those files, I have to keep it as simple as possible.
Yes, the additional stylesheet will be really lean, and additional so users will know exactly what has been modified and will be able to easily uninstall.
Thanks for confirming the syntax to use.
By the way, the mod is called Image Handler 2 and it is written for Zen Cart.