If HTML, CSS, and JavaScript Are Client-Side, Why Are They Components of a PHP File

If HTML, CSS, and Javascript are client-side, why are they components of a PHP file?

Your question sure is a good one many people asked sometime in their lives(web developers).
PHP indeed is a server side script, but the .php extension acts like a normal .html file most of the time.

PHP needs to be a partner with JS and HTML to work.

E.g. A login form. First, the client has completed the form and submitted it. JS then comes in power, using ajax to send your login information to the server(It could be the same document xxx.php, but the server only cares about the php script part).

Then, it sends back a result from the server and may insert a snippet of JS into your login form, where JS empowers and redirect the user from their HTML interface to a new website.

As you can see from the above example, clients and server handles a webpage differently disregarding their file extension. Clients cannot download the PHP source code and the PHP server doesn't care about other than php code themselves.

A single web file is like a port, where clients send information to a php page and the server returns a snippet.

Clients and servers may use one single .php page or can refer to different pages, but the server side webpage is always unaltered

If server-side and client-side programming are indeed separate, why does PHP include HTML, CSS and Javascript?

So it can compactly pack small things inside one web page. Clients view the interface, server executes the PHP code. However, it is not necessary to pack everything into one webpage.

Also, the .php extension can be viewed by clients, so that they know they will interact with the server sometime on that page. Also, .php does not necessary need to include PHP code.

If all of these are done in PHP, the server, where does the client come in?

Clients need to use JS to send information to the server for its response.

On a typical webpage running on a PHP, will there be standalone HTML, CSS, and JavaScript files that are not PHP files?

Yes, files that need not to be parsed by the PHP engine can be named and stored as standalone HTML, CSS and JavaScript file.

Will the client-side developer have have edit the HTML, CSS, and Javascript parts of the PHP file, while the server-side developer works on the PHP part of the file?

I will rephrase your question to be "So the client-side browser can change the DOM, while the server works on the PHP part?". There is no "client sided developer. There is just client sided visitors"

Partially right. Clients download a webpage, not using the same file on the server, the webpage can be altered before sending to the clients. Clients don't get to read the PHP source code, the server is done running the PHP code before sending a webpage to the clients, so the two do not run together. When clients send queries to the server, the server executes nothing but PHP. The .php document is unaltered on the server. After the PHP server has responded, usually, they will send back information to the browser viewing that particular webpage and trigger JS code and change the webpage's DOM, which means the look of the webpage is modified. You can interpret it as "HTML, CSS and JS" being altered.

Client side vs server side basics

Client side programming includes any coding or computation or effects or annimation or any sort of interaction your website performs with the user via browser. But server side programming is that which performs all the task in the server only. So the user is unaware of that.

For example, PHP is used for server side programming. You design a website with HTML and use JavaScript in it to take some input from user and modify it in anyway. To be more specific, if you created a blog website and you want to specify that the user can post a max of 5000 characters. Then you do some client side programming with JavaScript to count the number of characters and any filtering or anything. But then you need to send those posts to the server. The server then performs some server side task, may be with PHP, to sanitize the input for SQL Injection and saves it into a database.

User will only know what happened in the browser but not what happened in the server. Those are background tasks.

Why aren't PHP files used for (custom) CSS and JS?

People do it more often than you think. You just don't get to see it, because usually this technique is used in combination with URL rewriting, which means the browser can't tell the difference between a statically-served .css file and a dynamic stylesheet generated by a PHP script.

However, there are a few strong reasons not to do it:

In a default configuration, Apache treats PHP script output as 'subject to change at any given time', and sets appropriate headers to prevent caching (otherwise, dynamic content wouldn't really work). This, however, means that the browser won't cache your CSS and javascript, which is bad - they'll be reloaded over the network for every single page load. If you have a few hundred page loads per second, this stuff absolutely matters, and even if you don't, the page's responsivity suffers considerably.
CSS and Javascript, once deployed, rarely changes, and reasons to make it dynamic are really rare.
Running a PHP script (even if it's just to start up the interpreter) is more expensive than just serving a static file, so you should avoid it unless absolutely necessary.
It's pretty damn hard to make sure the Javascript you output is correct and secure; escaping dynamic values for Javascript isn't as trivial as you'd think, and if those values are user-supplied, you are asking for trouble.

And there are a few alternatives that are easier to set up:

Write a few stylesheets and select the right one dynamically.
Make stylesheet rules based on class names, and set those dynamically in your HTML.
For javascript, define the dynamic parts inside the parent document before including the static script. The most typical scenario is setting a few global variables inside the document and referencing them in the static script.
Compile dynamic scripts into static files as part of the build / deployment process. This way, you get the comfort of PHP inside your CSS, but you still get to serve static files.

If you want to use PHP to generate CSS dynamically after all:

Override the caching headers to allow browsers and proxies to cache them. You can even set the cache expiration to 'never', and add a bogus query string parameter (e.g. <link rel="stylesheet" type="text/css" href="http://example.com/stylesheet.css?dummy=121748283923">) and change it whenever the script changes: browsers will interpret this as a different URL and skip the cached version.
Set up URL rewriting so that the script's URL has a .css extension: some browsers (IE) are notorious for getting the MIME type wrong under some circumstances when the extension doesn't match, despite correct Content-Type headers.

If HTML, CSS, and JavaScript Are Client-Side, Why Are They Components of a PHP File