Jump to content

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

Go to solution Solved by MoeTalks,

Recommended Posts

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.

Link to comment
  • 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.


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution

Thank you both.  Some things will be site-wide some will be page-wide.  I was putting all the page coding at the top of the page so I would have one place to go.  Now that I realize I can add comments in code, it helps a lot.  I'm in the middle of re-branding and rebuilding and trying to be organized to make it easier down the road so I'm taking my time.

Thanks again.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.