CSS Problems - CS-cart needs better class names and IDs

Ok, this is my first cs-cart, so maybe I’m missing something clearly obvious to everyone else. There is a major issue with the way the cs-cart code issues classes and Ids to every single product related element that the cs-cart spits out. It applies a unique product ID and a general class. Which makes it very difficult to change the look of the “add to cart buttons” “add to wishlist” and “select options” buttons.



This is the default code it generates for the Select Options Button






<br />
div id="cart_add_block_281" class="buttons-container"><br />
<br />
<br />
<a id="button_cart_281" class="text-button" href="/test-lens-product.html">Select options</a><br />
</div><br />

```<br />
<br />
<br />
This is the default code it generates for the Add to Wish List<br />
<br />
<br />
```php
<br />
<div id="cart_buttons_block_281" class="buttons-container"><br />
<br />
<br />
<a id="button_wishlist_281" class="cm-submit-link text-button" name="dispatch:-wishlist.add..302-:">Add to wish list</a><br />
</div><br />

```<br />
<br />
<br />
<br />
First off I don't really see the point of it generating a unique ID for each item. That seems like the exact opposite of what most designers would need. Wouldn't it be better to have better class names for the elements so it would make it easier for designers to stylize individual elements?<br />
<br />
<br />
```php
<br />
div id="cart_add_block_281" class="options-button buttons-container"><br />
<br />
<br />
<a id="button_cart_281" class="text-button option-button" href="/test-lens-product.html">Select options</a><br />
</div><br />

```<br />
<br />
```php
<br />
<div id="cart_buttons_block_281" class="wishlist-button buttons-container"><br />
<br />
<br />
<a id="button_wishlist_281" class="wish-button cm-submit-link text-button" name="dispatch:-wishlist.add..281-:">Add to wish list</a><br />
</div><br />

```<br />
<br />
<br />
Just by adding a more descriptive class name to the same code it makes it much easier to stylize these elements. These are just two examples, but I see this all over the place. Is there a way to add better class names to the buttons template? Has anyone done this?

They use a unique ID so they can do things in an object oriented manner. ID's must be unique on a page (per HTML specs). You should be using classes to qualify your styling for repetative elements like buttons. You might need to provide context to your css like product-details.text-button or something to ensure that you are only dealing with the styling of text buttons within a particular divisional area.

Yes I’m aware IDs are suppose to be unique. But unique to that HTML page, not a particular product in a site full of products. I can’t think of any uses for a unique ID per product. Maybe if you want to highlight a particular product, but who would do that using CSS aside from a web designer? CSS IDs and classes are suppose to make it easier to stylize particular objects in a layout. Having an ID that is product specific, even though that element is unique to that layout seems to defeat the purpose of having an ID. Considering you can’t even use it. I can get around the button issue I was having, but this topic relates more to my other post.