WordPress.org

Ready to get started?Download WordPress

Forums

Message to theme developers (19 posts)

  1. orangeguru
    Member
    Posted 9 years ago #

    Do yourself and your users a favour and comment your code and your CSS.

    I have looked at many themes (because I am currently preping my own stuff for release now that 1.5 is final) and I am suprised at the lack of any commenting or even hints what certain lines of code do or don't.

    Since so many people love to play with YOUR themes, why not give them a chance to explore your work and adopt it more easily to their liking?

    Is this something like that too complicated?


    <!-- headline of your post -->
    <div class="category"><?php the_category(", ") ?>:</div>
    <div class="title" id="post-<?php the_ID(); ?>">
    <a href="<?php the_permalink() ?>" rel="bookmark"
    title="Permanent Link to <?php the_title(); ?>">
    <?php the_title(); ?></a>
    </div>
    <!-- end headline of your post -->

    Especially with 'long running' styles and boxes it helps to tell people where one DIV starts and where it ends. I have seen themes with extremly nested DIV or four 'ending' DIVs which made it hard to understand what was going on ...

    Why not simply write something like this?

    </div>
    <!-- end section post -->

    </div>
    <!-- end section content -->

    Also the CSS are often hardly structured of spread the style definitions over serveral entries. The new default style has several entries for the simple h2 tag:


    h1, h2, h3 {
    font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, Sans-Serif;
    font-weight: bold;
    }

    h2 {
    font-size: 1.6em;
    }

    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #333;
    }

    a, h2 a:hover, h3 a:hover {
    color: #06c;
    text-decoration: none;
    }

    h2 {
    margin: 30px 0 0;
    }

    I can perfectly see and understand the designers idea behind HIS way of organising the CSS - it is nevertheless confusing for mere mortals. And mere mortals will try to adopt your work ... and pester you with support requests if they run into problems ...

    ;-)

  2. help-me-please
    Member
    Posted 9 years ago #

    I would second that, especially the importance of marking divs, because it's very hard to keep track of divs that open and close in different files. The only thing I would add, is that female designers should comment their code too, not just the men ;)

  3. davidchait
    Member
    Posted 9 years ago #

    a few things:

    1. use indentation when within a given file. makes it easy to see start and end points. I use tabs for major indents, as spaces take too many characters.
    2. where possible, use PHP comments, as they don't output into the HTML.
    3. where possible, don't add unnecessary comments that output into the html, or in the css, as that increase page-load times down to a client machine...

    Everyone pays for bandwidth... ;)

    -d

  4. Joni
    Member
    Posted 9 years ago #

    Using a program like Bradsofts Topstyle Pro (or even the crippleware version of it) helps keep stylesheets lean and mean because it has a tool called Tidy that can clean up your style sheets, combine elements, etc.

    http://www.bradsoft.com/topstyle

    And just go to my blog and hit View Source. I comment the heck out of everything because I can never remember if I've closed a division or not so you see in my templates where I indicate that I've done so. It's saved many a strand of hair from being pulled out!

  5. orangeguru
    Member
    Posted 9 years ago #

    Thanks for the feedback - it's good to see that others share my concerns/suggestions. ;-)

  6. orangeguru
    Member
    Posted 9 years ago #

    @jonimueller: Excellent work - comments like yours make it much easier to 'decode' and learn from other people's work - and that's how much web designers collect knowhow ...

  7. smarties
    Member
    Posted 9 years ago #

    great idea!!! that would surely help a lot of newbies.

  8. jewelwg
    Member
    Posted 9 years ago #

    I am glad others feel the same way. I thought it was just me struggling to find which piece of code/css to change!

  9. jberglund
    Member
    Posted 9 years ago #

    Orangeguru... thanks for the organization comments, especially for the CSS. I spent a few hours just looking through a stylesheet from one of the templates this weekend. And, though I understand 'why' the author organized it like that - in some ways, it made sense - it was nevertheless extremely difficult to manuever through. I had to look at 4 different sections in order to figure out the final structure of the page and how I could change it for what I needed.

    I'm glad I'm not the only one who had difficulties. I felt a lot like jewelwg did... I thought it was just me! :)

  10. jewelwg
    Member
    Posted 9 years ago #

    well at least we now know there are two of us!

  11. jberglund
    Member
    Posted 9 years ago #

    Yeah! We can start a club! ;o)

  12. davincim
    Member
    Posted 9 years ago #

    Oh man, it would indeed be so helpful if code and css were commented more often. I spend so much time trying to figure out if this thing changes that thing.

  13. NuclearMoose
    Member
    Posted 9 years ago #

    I have a suggestion regarding stylesheets and lots of comments - and that is to keep TWO stylesheets. One stylesheet is a copy of your production CSS, and has all of your comments. The other copy, which is what is served to your site visitors, has NO or VERY FEW comments. Why? Because the size of your CSS matters. You should be serving up the leanest CSS file possible to visitors. I know that it's extra work, but a large CSS file does slow down rendering.

    Just a suggestion - take it or leave it! :p

  14. jberglund
    Member
    Posted 9 years ago #

    I think it's a good suggestion.

    I don't mind the work in experimenting/changing/dissecting... it helps me learn what things do - (just like taking apart my radio when I was little :). But, it would be helpful just having side-by-side stylesheets to compare and dissect and pull apart.

  15. mkgago
    Member
    Posted 9 years ago #

    I can perfectly see and understand the designers idea behind HIS way of organising the CSS - it is nevertheless confusing for mere mortals.

    Can anyone explain the structure of those h2's to this mere mortal? why is it set it up in that way?

  16. NuclearMoose
    Member
    Posted 9 years ago #

    mkgago,
    The only person that knows that is the creator of the Kubrick template. http://binarybonsai.com

  17. orangeguru
    Member
    Posted 9 years ago #

    @NuclearMööse: In terms of size I absolutely agree with you to keep the CSS mean and clean. In terms of support and learning from other peoples CSS - keep them in the CSS.

  18. orangeguru
    Member
    Posted 9 years ago #

    @mkgago: This CSS works mostly this way: instead of defining one style after another he combines elements by shared attribtes, like declaring the shared fonts, then the shared colours etc.

    Make sense, but is unusual - and hard to decipher if you 'think different' ...

  19. TechGnome
    Moderator
    Posted 9 years ago #

    There's nothing from a theme developer from having 2 CSS files.... or 2 sets of template files for that matter.... one for use that's lean & mean, and one for release that's commented and well-defined in terms of what's going on.

    Tg

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.