Semantic code, inlines styles, and a single stylesheet
Page: 1
Brady J. Frey
on Jun 10. 2007. 7:36 am
I love this web app so far, but I just had to voice my concern about the above issues, as I'm 4 hours into rewriting some of the code!
First, semantic code. This is a common issue in web apps (cube cart is growing bloated because of it, zen carts always had trouble trying to lean this way - it's a reason why other, 3rd party stores are starting to clump up), but it's a relevant problem and important in web development. For the most part, trading tables for divs/spans with redundant id's/classes is not the modern way for web development. It's creating content that's not accessible, means nothing when transferred to various browser devices, and makes it MORE difficult to stylize. It's interesting that activecollab is half semantic, and half not semantic. In some cases I see code that's relevant with proper lists, headers, paragraphs, etc, then I find:
or
I'd suggest to please try and avoid this by making proper semantic tags - or atleast contain the division with a div id'd if you need, so that we can subchild elements like #divid h2 {} and so forth.
Second, Inline styles. There's really no reason for it at all. I know I can override them in my theme css, by why the extra cruft in the html that has no value? Login page has a margin for one element (and multiple, irrelevant divs), that can easily be applied in a theme's external stylesheet as it should be. I'd be open to debate, but I see no logical reason for an inline style... anywhere. Especially since you have default styles applied.
Third, as I've noted before in my comments, a single stylesheet is a must. I know a few creative directors and designers that use multiple (say, one for layout, one for font, one for color), but not 25. Nor nested in various folders no less. The benefit of a cascading style sheet is that it cascades through multiple documents - not a varied call on varied pages. It doesn't save space or load time - and if you're concerned about the abundant CSS, semantic code will shrink that css file down something fierce. For young coders, they're going to have a headache finding all the areas to fix - old coders, are just going to be annoyed.
Now, I know this is open source, so the benefit of me hacking it beyond belief on a sunday night is my given right and well not of your concern; but the above would save your followers trouble, save yourself in future updates, and allow your code to live on past the stress that many of the open source apps are feeling in the web 2.0 world.
A brief rant on the above for cubecart
Side note: If you want the code when I'm done, you're welcome to it. If you want help on your current build - I'd be happy to scrub it down, recode the XHTML for increased semantics, removed inline styles, and to go to one style sheet. This is a fantastic application, I just want it to be perfect and to succeed for the community!
First, semantic code. This is a common issue in web apps (cube cart is growing bloated because of it, zen carts always had trouble trying to lean this way - it's a reason why other, 3rd party stores are starting to clump up), but it's a relevant problem and important in web development. For the most part, trading tables for divs/spans with redundant id's/classes is not the modern way for web development. It's creating content that's not accessible, means nothing when transferred to various browser devices, and makes it MORE difficult to stylize. It's interesting that activecollab is half semantic, and half not semantic. In some cases I see code that's relevant with proper lists, headers, paragraphs, etc, then I find:
<div id="footer">
<div id="copy">
© 2007 by <a href="http://yoursite.com">company</a>. All rights reserved. </div>
</div>or
<div class="header">Welcome to your newly created account</div> <div class="content">Your Name, welcome to your new account. From now on it will always be available on http://yoursite.com (you can bookmark this link). You can get started in a minute following these easy steps:</div>
I'd suggest to please try and avoid this by making proper semantic tags - or atleast contain the division with a div id'd if you need, so that we can subchild elements like #divid h2 {} and so forth.
Second, Inline styles. There's really no reason for it at all. I know I can override them in my theme css, by why the extra cruft in the html that has no value? Login page has a margin for one element (and multiple, irrelevant divs), that can easily be applied in a theme's external stylesheet as it should be. I'd be open to debate, but I see no logical reason for an inline style... anywhere. Especially since you have default styles applied.
Third, as I've noted before in my comments, a single stylesheet is a must. I know a few creative directors and designers that use multiple (say, one for layout, one for font, one for color), but not 25. Nor nested in various folders no less. The benefit of a cascading style sheet is that it cascades through multiple documents - not a varied call on varied pages. It doesn't save space or load time - and if you're concerned about the abundant CSS, semantic code will shrink that css file down something fierce. For young coders, they're going to have a headache finding all the areas to fix - old coders, are just going to be annoyed.
Now, I know this is open source, so the benefit of me hacking it beyond belief on a sunday night is my given right and well not of your concern; but the above would save your followers trouble, save yourself in future updates, and allow your code to live on past the stress that many of the open source apps are feeling in the web 2.0 world.
A brief rant on the above for cubecart
Side note: If you want the code when I'm done, you're welcome to it. If you want help on your current build - I'd be happy to scrub it down, recode the XHTML for increased semantics, removed inline styles, and to go to one style sheet. This is a fantastic application, I just want it to be perfect and to succeed for the community!
Brady J. Frey
on Jun 10. 2007. 7:41 am
Regarding the inline styles - I know that some of the display: none's are for your javascript calls, that makes sense, so that's ignored. Stuff like this, in user_card.php, seems irrelevant for example:
style="margin-bottom: 0" could be external - and that should be a list of some sort, not a div/span volley.
<div class="cardBlock" style="margin-bottom: 0">
<div><span><?php echo lang('office phone number') ?>:</span> <?php echo $user->getOfficeNumber() ? clean($user->getOfficeNumber()) : lang('n/a') ?></div>
<div><span><?php echo lang('fax number') ?>:</span> <?php echo $user->getFaxNumber() ? clean($user->getFaxNumber()) : lang('n/a') ?></div>
<div><span><?php echo lang('mobile phone number') ?>:</span> <?php echo $user->getMobileNumber() ? clean($user->getMobileNumber()) : lang('n/a') ?></div>
<div><span><?php echo lang('home phone number') ?>:</span> <?php echo $user->getHomeNumber() ? clean($user->getHomeNumber()) : lang('n/a') ?></div>
</div>
style="margin-bottom: 0" could be external - and that should be a list of some sort, not a div/span volley.
Brady J. Frey
on Jun 10. 2007. 5:15 pm
Ilija Studen:About splitting CSS into multiple files - thing with activeCollab in 0.7.1 is really bad and we improved how CSS is organized in 1.0 a lot, but we simply cannot put everything into one file. First, there is a large set of general rules, plus theme that can inherit or override general rules, plus every plugin needs their own sets of rules. Mixing all of that into one file violates code separation rules that are required to keep activeCollab modular.
It's great to hear there will be alot of improvements in the CSS for upcoming versions. I don't see how a single, or atleat cutting down, the CSS file would violate code separation rules... CSS in general is made for designers as separation of conten/style. For those of us making themes, we'll be adjusting all the CSS as a whole regardless... I could see a single file for plugins, a single file for the default theme. But 25 seems more like a preference choice, not something that keeps things modular. Maybe it's because I think of CSS as not something that's a part of the content or the codebase, and a single file keeps things clean - is there any documentation or tuts that recommend this, as it goes against most of my design training!
Thanks for the prompt feedback:)
Brady J. Frey
on Jun 10. 2007. 6:41 pm
It does, thanks Ilija - again, I look forward to the 1.0 and will post up if I see anything else that'll help.
Topic is locked. If you have something important to say about issues discussed on this page please write at hi@a51dev.com.



