Now I am converting one of the templates to something I like. This reminds me of Wordpress modification days… However, how CS-Cart sets classes on HTML elements is not as good as Wordpress team structures their code.
Let’s face it, most changes to a template are cosmetic without any new logic added. We are talking about repositioning some block elements and changing color, visibility, margins… may be even a few pictures edited. But most of all this is all that new customers do. Sure there are great coders are out there that can get their hands dirty but overall the customers of CS-Cart don’t do many changes.
It is not easy for someone who does not code daily.
There is an easier way, the way wordpress does, and you cannot ignore their rise over any other standalone blog system in the last two years. They know what they are doing. Especially, what I am about to propose will not change CS-Cart code dramatically.
I propose to add more class combinations aka class=“me1 me2 me3” all over the code for better CSS control which in turn will allow:
Ability to change more with CSS without PHP knowledge. More users happy.
Will keep CSS skill level to basic class manipulation as minimum CSS knowledge required. Don’t even need to know what a Pseudo class or element is.
Will keep more modifications to CSS than to TPL files since most non logic elements will be easy to manipulate with CSS. You can run your CSS file with changes the last on the page which will “over-write” default CSS. If you ever need to go back, just comment the link out.
A single CSS file for most changes, easier upgrades.
If you will look at Cs-Cast code, some items are IDs, some classes, some are none. Wordpress perhaps is using TOO MANY classes because they add a CSS classes to everything and in multiple ways. The Cs-Cart is doing its job too but not as greatly as wordpress.
IE7 does not handle CSS Pseudo-classes and elements too well and it is a pain to reference first, last (and such) for all browsers to work. The wordpress actually adds to the first post a custom class like “post_first” and “odd” or “even” for creating cells of different color so you can reference each and every cell without using pseudo classes. You don’t have to use all css classes that are given in the code but more is better than less.
Now in CS-Cart if you don’t have a class to reference then you need to go into templates… Or do a chain CSS rule like ( .blah span a)
With a great CSS class system you can reposition block type elements anywhere with adding absolute positioning or “removing” something by setting it “display: none”. No need to dig through the code and look where that TPL file is and what place to modify. Such a convenience…
Example, Attachments code generated by Cs-Cart:
<div id="content_attachments"><br />
<p><br />
This is my Attachment (fw4.pdf, 164 Kb) [<a href="index.php?dispatch=attachments.getfile&attachment_id=1">Download</a>]<br />
</p><br />
<p><br />
This is my other Attachment (R-intro.pdf, 635 Kb) [<a href="index.php?dispatch=attachments.getfile&attachment_id=2">Download</a>]<br />
</p><br />
</div>
```<br />
<br />
Here is what would Wordpress team re-write the code:<br />
<br />
```php
<div id="content_attachments" class="product attachments tabs user_registered empty_cart never_bought usa_location"><br />
// Notice how much more info above is added, you can mod the hell out of it<br />
<p class="attachment_first attachment_even"><br />
<span class="attachment_title">This is my Attachment</span><span class="attachmen_attrib">(fw4.pdf, 164 Kb)</span> [<a href="index.php?dispatch=attachments.getfile&attachment_id=1">Download</a>]<br />
</p><br />
<p class="attachment_last attachment_odd"><br />
<span class="attachment_title">This is my other Attachment</span><span class="attachmen_attrib">(R-intro.pdf, 635 Kb) [<a href="index.php?dispatch=attachments.getfile&attachment_id=2">Download</a>]<br />
</p><br />
</div>
```<br />
<br />
You don't have to use all classes but it is nice when they are already there...<br />
<br />
I noticed this with CS-Cart, if an element has an ID then that element has no classes assigned to it. That is not right. Classes can be a great addition of information to that element. ID can be helpful to Javascript, and classes for styling the element based on additional environmental parameters where a single ID cannot express all but combination of classes can.<br />
<br />
This should be easy to implement and would make the cart much more easy to modify, easier to modify cart would also bring better sales...<br />
<br />
Let's do it!
You just effectively double the HTML and CSS code, while slowing down the parsing and rendering of the webpage.[/QUOTE]
There’s always a balance. Would you prefer to simply remove all classes and id’s and use really really long specific dom selectors to make your CSS and JS? It will make the page faster, but like 0.01%.
Perhaps TexasGuys example was a little extreme, but he has a point.
It doesn’t increase the processing time on the page by any significant amount. Simply initializing a packed jQuery takes hundreds of milliseconds longer than any parsing of extra classes. Chances are you will never notice.
It might increase the page by what, 1k?
The home page on the demo store including all files is 309.8k.
Is 0.003% increase going to make a difference? No.
But will it help with making very specific and customized design changes across the entire site? Oh yeah, by a lot. Will it make the designers time better spent? It’ll save hours.
Ever see [url]http://www.csszengarden.com/[/url] ? That is how all sites should be designed. That is the quintessential nirvana of design.
[quote name=‘phazei’]There’s always a balance. Would you prefer to simply remove all classes and id’s and use really really long specific dom selectors to make your CSS and JS? It will make the page faster, but like 0.01%.
Perhaps TexasGuys example was a little extreme, but he has a point.
It doesn’t increase the processing time on the page by any significant amount. Simply initializing a packed jQuery takes hundreds of milliseconds longer than any parsing of extra classes. Chances are you will never notice.
It might increase the page by what, 1k?
The home page on the demo store including all files is 309.8k.
Is 0.003% increase going to make a difference? No.
But will it help with making very specific and customized design changes across the entire site? Oh yeah, by a lot. Will it make the designers time better spent? It’ll save hours.
Ever see [url]http://www.csszengarden.com/[/url] ? That is how all sites should be designed. That is the quintessential nirvana of design.
[quote name=‘hyteckit’]Because I disagree with have something like this:
I want to remove all classes and element ids?
Yes, let's just have:
Much better than just having: :rolleyes:
[/QUOTE]
As this is the internet, I can't tell if you meant to have a "\s" for sarcasm there or not, or maybe you're trolling, in which case, I thought better of this forum.
If not:
Sure, how about we just forget about the css file and js file and do it like this:
*\s*
The entire purpose of CSS is to seperate content from styling. If everything was so defined it wouldn't be possible to completely change the style with CSS at all without modifying the code, which should always be unnecessary.
If you truly think it should be that way... are you actually a developer/designer at all? Or have you not looked at any movement in the web development world since 99?
(if you were \s, i apologize)
EDIT:
Perhaps I missed your point. On second read, I can understand the correlation you were creating between the extremes. But at least in the former case, it is descriptive and the designer can decide how he wants that status to be presented. In the latter, there is no indication as to why it has any of those styles at all, and they can't be easily adjusted.
When writing your own code, it might be ok to do that sometimes, because you can go and adjust it. But when the code is for the public, or any other people, or for a designer who can't change the file itself, and they want to be able to easily update, then there needs to be some description.
It would help any developer and wouldn't cause any noticeable overhead.
I’d like to clarify exactly what I mean by more css selectors, and specify how it should be done.
CSC should have at least a minimal number of selectors, not none.
By minimal I mean:
There are lots of tags that have unique selectors that are auto generated with some changing number on the end, so the scripts can access them, but static CSS can’t. Those as a group should all share a class, perhaps the base of whatever class name it’s given without the number. (eg class=“product_list_item product_list_item_348723”)
There are also lots of tables that are unmarked, all tables should have a unique selector. If a table is used on lots of different pages, it doesn’t help if it has a class name because you can’t specify the page. I’m not talking about pagination type pages, but using a class like multicolumn-box on search pages, category pages, category catalog, and product pages doesn’t help if you only want to style one of those pages.
Nearly every tpl should be uniquely target-able. If it’s main purpose is a table, then that table needs a class, if it’s a div, then that needs a class. If something is in some loop, they should share a class and the container element would need its own class as well. Since some of the tpl’s are used often in different scenarios/pages, whatever is calling that tpl needs to be uniquely selectable as well. That would probably be yet another tpl, so as long as the idea is kept up, the idea should waterfall/cascade down through the classes.
Beyond minimal would be selectors that change based on specific things, that is what wordpress does. That would require a bit more code to specify the selectors. Though I don’t think this is a necessity. Perhaps only on the main container div for logged in or not, but it’s too easy for that to landslide into overkill.
Having a minimal number of selectors on everything will at least allow targeting of elements on a much less general scale.
Also there should be some exclusions as well. There should not be any classes such as ‘center’ ‘float-left’ ‘border’ etc. Anywhere those type of selectors are used, should be contained within enough classes that they can be targeted remotely. If there is a table, every td or tr doesn’t need it’s own selector unless they contain different types of information. Same goes for most elements that contain repeating elements of the same type within them.
Some places they have a table, and every other row has a class and the others dont, even though all rows contain the same type of data, that is ridiculous. They use jquery, so they could use :odd/:even. Their classes don’t serve more than some structural purpose, it’s just very bad style.
I am continually needing to edit template files simply to put class names in and it’s a major pain when upgrading.
It’s not like adding good tags requires any algorithmic programing skills. It shouldn’t even require a side thought, just something that’s done naturally.