bbPress

bbPress support forums » Themes

1. ear1grey
   Member

   <p class="soapbox">
   Having hacked at the default bbPress template I'm conscious that it makes extensive use of element identities for it's formatting.

   i.e. elements have an id="xyz" or a name="xyz" attribute, and in the css there is a corresponding #xyz { color: #FFF; }.

   With a pluggable base model such as bbPress it makes sense to specify "how to render things like this" rather than "how to render the thing called this".

   Thus my request and suggestion is that anyone considering designing bbPress themes in the future seriously considers using CSS classes instead of IDs for formatting.

   The use of classes has the same effect as id's, but there is a key benefit: an ID can only appear once on a page, so if a page element is repeated, and it's formatting is based on an ID, then the template breaks.
   </p>

   Posted 1 year ago #

2. gnawph
   Member

   Using classes for everything is pretty sloppy. When start hacking up the bbpress theme and come across an ID I know exactly whether or not that element is going to be repeated. When I work with a design that has strickly class based selectors I go crazy.

   Something like "class=header" is completely insane. There really should only be one header inside the site and you use an ID to signify that elements usage.

   For example when I take a look at /bb-templates/font-page.php and see <table id="latest"> I already have a good idea of what all the code contained inside that <table> tag will be.

   Also if my page gets larger I can put "jump links" to those sections and help my users navigate my site.

   There are other properties of ID tags that do fancy stuff with javascript but I'm not quite sure what they are.

   Posted 1 year ago #

3. ear1grey
   Member

   Using anchors for navigation ("jump links") is a good thing, I agree. I'm not advocating the removal of any of the ID's from templates. The fact that so many WP and BB elements are identified in the DOM is a good thing - for one thing it makes the identification of objects easier in JavaScript.

   It's just that ID based styles are not as extensible as class based styles - ID styles let you describe the style for one and only one element. Class styles let you describe the style for one or more elements that declare they are of that type.

   Posted 1 year ago #

4. gnawph
   Member

   Right. I'm sorry, but I don't understand your point.

   I like the ID elements, much easier to understand the page.

   I'm doing a quick check of bbpress's default templates and I don't see too many IDs I'd even consider repeating inside the code.

   Is your poing that styling more than one ID with the same colors, padding, whatever, is redundant?

   Posted 1 year ago #

5. ear1grey
   Member

   That's part of it yes...

   ...but also, using ID based formatting can cause trouble down the line when users want to add more elements to the page and find they have to change the CSS rather than just saying that their new addition <thing id='latest' />; should be formatted in the same way as <thing id="popular" />; because they're both the same kind of table.

   This is a double pain because CSS seems to get stuck in some browser caches so users see the new page with the old CSS.

   The shift from "how do I want this to look?" to "what kind of thing is this and what do those things look like?" is (I have found) worthwhile.

   Posted 1 year ago #

6. gnawph
   Member

   Users should have to rethink their CSS. Not using a ID selector just because a "newbie" doesn't realize there can only be one element attatched to them is lame. The difference between ID and Class is one of the fundamentals of CSS. The bbPress designers would look foolish changing all of their IDs to Classes and wouldn't conform. These selectors carry semantic meaning and without them your HTML code becomes less proffesional and harder to read.

   Latest and Popular are different tables and shouldn't be labeled the same. If code redundancy is an issue you could always go:

   • #latest, #popular {

   -or-
   

   • <table id="latest" class="tableonmainpage" >

   If somebody is going to be digging around and making their own theme they should really take 5 minutes to read a CSS tutorial.

   Posted 1 year ago #

7. SteveAgl
   Member

   I totally aggree with gnawph, the right use od IDs and classes is the one it explained, I on't agree about havng different object with different purpose sharign a common class just cause they will look the same, they are different objext and then shoudl be identified by different ID, the child elemens, like row and cells, HAVE to be identified ausing class only cause they really look the same and they are more than one.

   So +1 to the gnawph's point of view

   Posted 1 year ago #

8. ear1grey
   Member

   gnawph wrote:

   The bbPress designers would look foolish changing all of their IDs to Classes and wouldn't conform.

   I've already stated that: "I'm not advocating the removal of any of the ID's from templates". I am, however, conscious that the reliance on ID based formatting in the default template is more likely to run in to integration problems in the long run.

   "Latest and Popular are different tables and shouldn't be labeled the same".

   Yes, latest and popular are different tables (their ids are different), but they are both examples of a certain kinds of table that show an ordered selection of items based on some kind of score (be it date or rating). So it's better to define what that kind of table is, so use a class.

   "If code redundancy is an issue you could always go:#latest, #popular {"
   

   Yes, this does have a similar effect, but, if I'm writing a plugin with UI elements then for it's output to be shown correctly in TemplateX, either:

   1. I have to add CSS to the plugin which might work with TemplateX, but be incompatible with TemplateY, or
   2. The authors of X&Y must alter their css to cope with my plugin.

   This potential hassle just becomes less likely if template designers take an extra few minutes to consider what the more abstract classes in the design should be!

   BTW: class="tableonmainpage" might be better described as .mainpage > table {}

   Posted 1 year ago #

9. Null
   Member

   I think that we also must take under consideration that the basic template (Kakumei) will be used as a starting point/ reverence. So "fixing" this in that template will be a good point to start with...

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.

Code is Poetry.