Page Code & CSS Organization - Best Practice/Tips/Ideas/

I'm finding I'm using a lot of code.  Some I put in CSS and some I put directly on the page that I'm working with.  I'm trying to find the best methodology for placement for code because sometimes I can't find my code on the page, and I have to do a ctrl-a and when it highlights, then I can see where it's at.  I could put it in the CSS, but my CSS is already overrun with code.  I have put comments /* in the CSS so I know what pertains to what, but I'm not sure where to put the page codes.  I do backup and copy out all my CSS code but realize I can't do that with the page code.  Does anyone have a best practice for page codes? Any tips for that matter.  Thanks in advance.

• I usually insert CSS code into the Page Header if the code only affects one page. (or use Code Block, if use Personal Plan)
• Use CSS in CSS boxes if it affects all pages
• Sometimes I use CSS in Code Injection, if the code is directly related to the script code already inserted there. For example, if I use script code to insert the Second Logo, and I need CSS to resize the logo, I will insert the CSS there too.
• If the CSS code is too long, I'll usually create a CSS file, paste all CSS there, and then declare it to Code Injection Header via <link rel="stylesheet" href="link to css file"/>
• For all code, I will add a Comment line, so I know what the code will do, for easy editing.

I generally use the same pattern as @tuanphan. Get the code as close to the elements it affects. 

Some folks tend to avoid per page code injections and use the site-wide code injections.

Use whatever method works best for you but as @tuanphan mentions sometimes the nature of the effect can also drive where the code is stored.

There is no right answer and each method has pros and cons.