Wordpress - Work separate files (php, css and js), or merge them all into one file?

Question

I am working on my wordpress website and I want to keep a very low number of plugins. So I only write codes that I need. I was wondering what is the best practice of working with php, css and javascript files? I'll explain...

As far as my knowledge is concerned, I think there are only two options for organizing files:

1. Write files with separate extensions (css, js and php) and include css and js inside the php file.

2. Write only php file and put inside it js and css pure code.

Here is some code related to the options to further clarify what I mean. Which of the two options is more practical and safe? Also can there be any impact on performance or page loads?

Options 1: separate css and js which are included inside php files, in this case css and js are located in a specific directory as separate files.

<?php

/* My custom Template */

?><link href="https://mywebsite.it/wp-content/themes/theme-child/assets/my_custom.css" rel="stylesheet" type="text/css" ><?php
?><script type="text/javascript" src="https://mywebsite.it/wp-content/themes/theme-child/assets/my_custom.js" defer></script><?php

defined( 'ABSPATH' ) || exit;

<form class="my-form" action="" method="post">

My form content php code...

<fomr/>

Options 2: write css and js directly into php file, in this case as you can see I write css and js code directly into php file.

<?php

/* My custom Template */

<style type="text/css">
My css Content here
</style>

defined( 'ABSPATH' ) || exit;

<form class="my-form" action="" method="post">

My form content php code...

<fomr/>

<script>
My js Content here
</script>

Answer 1

Option 1 would be the accepted method if you are coding everything yourself. You will have a performance hit because of it slowing down the page render though. If you are planning to only load scripts and styles on the pages needed would offset performance hit.

Personally I load enqueue scripts on pages I need them on only and don't inline anything, just be sure to use a good performance plugin like WP Rocket or Asset Cleanup, they are very good at minimizing performance hit and also have nice features for pre loading fonts, integrating CDN etc.

Lastly good call on minimizing plugins, less is better.

Edit: Would use this plugin though for loading custom scripts, has conditional control for only loading scripts on certain pages, bit more control and its pretty light - https://en-gb.wordpress.org/plugins/custom-css-js/