What is the Deal With Automatic Spacing / formatting When Editing Code in Theme Files ????

Beyblade-Gamer
Explorer
55 0 16

I'm using the Dawn 13.0.1 Theme  (not that it matters for this question though).

 

Anyways, when it comes to editing the code in the theme files (IE:  theme.liquid) for example, does the spacing and line breaks in the code even affect anything whatsoever?

 

I'm not talking about breaking up the actual lines of code, or commands, etc., I'm talking about spacing BEFORE lines of code, or line breaks in between lines of code, and so on...

 

 

EXAMPLE 1:

 

<style>
.product__info-container .product__title h1 {
font-size: 30px !important;
}
</style>

 

 

EXAMPLE 2:

 

    <style>
      .product__info-container .product__title h1 {
        font-size: 30px !important;
      }
    </style>

 

 

EXAMPLE 3:

 

<style>

 

.product__info-container .product__title h1 {


font-size: 30px !important;

 

}

 

</style>

 

 

Does any of those differences even MATTER when all is said and done? (IE: will it affect the output and the way that the live website ends up looking???)

 

Or is all of that fancy spacing, line breaks, etc., just for keeping it neat and organized, in the actual code, for the person that is reading and editing the code???

 

Also, I noticed that if I manually write in code when editing a theme file, it will automatically certain amounts of space, to certain parts of the code, when I hit the ENTER button and create a line break. Is this just how the code editor works? Again, is this just for aesthetics of the code or whatever??

 

 

FOR EXAMPLE, if I MANUALLY type in the following code (rather than COPY / PASTE the code) when editing a theme file, it will automatically end up being formatted like this:

 

 

    <style>
      .product__info-container .product__title h1 {
        font-size: 30px !important;
      }
    </style>

 

 

(it automatically adds 4 spaces in front of the FIRST line of code, then 6 spaces in front of the line of code below that, then 8 spaces in front of the next line of code, and then 6 spaces in front of the next line of code (which is the closing tag }), and lastly, it adds 4 spaces in front of the closing </style> tag (as as it did for the OPENING <style> tag.

 

It is like the code editor automatically adds a certain amount of spaces in front of certain lines of code (attributes, tags, etc.)

 

Is that how it is supposed to work?

 

Also, if I were to Copy and Paste code in, it generally messes the spacing / formatting up. Sure, it doesn't appear to affect the actual appearance of the website, but it still kind of drives me nuts, because the way the code looks (the spacing before each line of code) is no longer uniform with the appearance of the rest of the code in the theme file  🙂

 

 

And again, my MAIN QUESTION IS THIS:  Does ANY of this spacing even AFFECT how the website ends up looking? Or is it just for pure aesthetic purposes, and making all of the code look uniform in the editor???

 

Thanks for any info. I know this is kind of a stupid question, but I have been wondering this for a LONG time now  🙂

Reply 1 (1)

PageFly-Richard
Shopify Partner
4287 973 1626

Hi @Beyblade-Gamer 

 

This is Richard from PageFly - Shopify Page Builder App

 

Those spacings won't affect the output of the code, no matter how much spacing you put between those lines of code.

 

What you should keep in mind is to not put spacing inside the line of code to keep the correct syntax. 

 

This is more related to code styling - since working with a team they will easily format, maintain and format the code.

However, you can eliminate those spacing to keep your CSS file clean, and reduce the total size of that file.

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.