Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

CSS flags and find using selection

Thursday May 12, 2005

Doug Bowman's post about flags within a CSS file (you may need to read it to make sense of this post) was exceptionally timely. Further to the advantages of flagging, I need to hand the file over to another person, for them to work with, and I wanted to make it as easy as possible for said person to find sections.

I have being doing a contents comment at the top of my CSS for a while now but combined with flags and the find using selection command, I have had a bit of a revelation.

So to cover it briefly, first set up the contents comment thus:

  1. /*NOTES ---------------------------------
  3. Insert notes here
  5. UPDATE INFO ------------------------
  6. Revision number: 0.7
  7. Last updated: 12 May 2005
  8. Last update made by: john oxton (john@joshuaink.com)
  9. CONTENTS ---------------------------
  10. =1: Universal reset
  11. =Reset margin and padding for all elements
  12. ---------------------
  13. =2: html and body
  14. ---------------------
  15. =3: General typography
  16. =Set default padding and margins
  17. =p
  18. =hx
  19. =dl
  20. =ul
  21. =ol
  22. =li
  23. =a
  24. ---------------------------
  25. =3a: General params
  26. =img
  27. ---------------------
  28. =4: Layout Divs
  29. =Page header logo
  30. =Hidden accessibility elements
  31. ... you get the idea
  32. --------------------- */

And then for each section, put a flag comment that corresponds exactly to the one found in the content comment, for example:

  1. /* =3: General typography */
  2. /* =Set default padding and margins */
  3. h1,h2,h3,h4,p,address,ul,ol{
  4. margin:1.3em 0;
  5. }

With this done you can now open the file in you favourite editor, highlight/select the flag you want to jump to within the content comment at the top of the page, this done, select Find Using Selection (Shift + F3 Dreamweaver) and you will be taken straight to the section, a bit like page anchors I guess.

Update

In Dreaweaver PC at least, pressing CTRL + Home will take you straight back up to the top of the page.

I am not sure what the Find Selection shortcuts are for each editor, but if you try this out at home (check with the adult responsible for your CSS first!) leave the name of your editor and the shortcut here in the comments.

If you want a ready made example to play with it can be downloaded here.

Now, back to work before the boss notices I am blogging at work!

  1. Philroche

    1766 days ago

    Very neat trick, there’ll be no end to my productivity now.

    My editors and their respective search for selection shortcuts (in order of editor preference):

    Jedit [ ALT + , + ENTER ]
    Editplus [ CTRL + F3 ]
    BBEdit [ Command + H ]
    XCode [ Command + G ]
    Textpad [ CTRL + F ]
    TextWrangler [ Command + H ]

  2. Graham Bancroft

    1766 days ago

    Good to have you back, just a fleeting visit, isit :-)

    Very useful way of scooting around a page I must say !

    It certainly beats having to remember what you called stuff in order to find it.

    Btw – I find in Dreamweaver you can highlight then just click F3.

  3. Jaakko

    1766 days ago

    skEdit [command + E]

  4. Anton

    1766 days ago

    Excellent tip, thanks!

  5. Remi Prevost

    1766 days ago

    That’s nice because organizing my code is the thing I hate the most to do when designing in CSS :)

    Now I’ll have a template to start coding! Thanks John :)

  6. Sebastian Schmieg

    1766 days ago

    Do you keep such extensive comment sections in the final version or do you upload an uncommented version to save bandwidth?

    While you can comment as much as you want to without having to think about bandwidth in php, it might be better to try to keep css-files as small as possible.

    Good tip anway!

  7. Jolo

    1765 days ago

    Excellent…. nicely done. thanks.

  8. Ian

    1765 days ago

    This is where CSSEdit wins hands down. The way it can group/search for selectors instantly is pretty impressive.

    I feel this method is just too bandwidth intensive, your example came out at 1.7kb which could easily mean seeing a un-rendered page on dial-up for a second or so.

    From what Sebastian said, if there was a way for .css files to not parse specific comments while reading the stylesheet, this method wouldn’t be an issue. But with the current status of the web, load times will continue to be an issue; every byte should be used correctly.

  9. Julian

    1765 days ago

    What about this: Add the following line to your .htaccess file:

    AddHandler application/x-httpd-PHP .css

    Then write your CSS-comments in “PHP-comment-style”: You have already /* and */ – you only need to put around (If you’ve got smart tags enabled).

    To round it up, you could gzip your CSS – now everything is small... http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/the-definitive-css-gzip-method/

    Cheers,
    Julian

  10. Julian

    1765 days ago

    Arrrgs…. My comment were stripped:

    You need to put PHP-Tags around – I’m sorry, I may not post code here… (< ? - ? > or < ? php - ? >)

  11. Raedan

    1765 days ago

    Excellent, nicely done. Maybe this is a way I can read my code more easly even after several month.

  12. John Oxton

    1765 days ago

    Re: Bandwidth. Well you can do what you will to optimize the code before launch and yeah, keep a live copy and a development copy. A nice automated optimizin script would do the trick, such as this one like I say this is a method was devised for working with another person.

  13. Andy Hume

    1765 days ago

    Oy… Oxton. Back on your knees!

    And what’s that? A computer?!

  14. Ian

    1765 days ago

    Ah ok, I was thinking you were doing this too share via the web. It’s all a little clearer now.

    When your working with 20k+ stylesheets breaking it up like you have done is a must.
    I do find myself doing some alphabetical sorting everynow and then and that seems to work a bit.

  15. Chris J. Davis

    1765 days ago

    Yeah, I have gone to just alphabetizing my CSS, looking for .header… look in the H’s.

    I am not sure how I feel about adding more text to my CSS that feels hacky I like the purity of my stylesheets.

    But this does have some serious potential for other things.

  16. Veracon

    1765 days ago

    Excellent idea, it’ll make organizing CSS much easier.

    Notepad2: No direct one, but you can select something, go to Find (ctrl+f) and press enter.

  17. Mike Stenhouse

    1765 days ago

    I’m part way through launching a site with an article on something similar. I split my general CSS sections into separate sheets – the smaller, manageable chunks mean that I have less scrolling to do and I can comment out whole sections at a time. I can also reuse whole chunks between projects. Have a read and hopefully you’ll what what I’m on about. Pardon the site itself – it’s not live yet so there are broken bits around the place…

  18. Nathan Smith

    1763 days ago

    Typically, I just put things in my CSS in the order they’re going to appear in the HTML (so that with the cascade I can override things on a per-instance level). I like Chris’ idea of alphabetizing things though. We’ve recently started redesigning the site for the school where I work, and are using the = for notation. I wish I’d thought of that, but then again I’m no Bowman. :)

  19. Neil

    1763 days ago

    How good is that?

  20. Stefan Isarie

    1762 days ago

    I use Quanta and I use ALT + PageUp to go up a bookmark and ALT + PageDown to go down a bookmark.

    Excellent tip! Thank you!

Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member