I'm doing practice with CakePHP and just wonder to know if it's logical/right thing to place CSS portions dedicated to the template view only.
I'm talking about thing like this:
<style>
.form-element-name {
width:150px;
/* colors and other stuff are placed in main css */
}
</style>
<form>
<div class="form-element-name">Username</div><input name="myuser"/>
<div class="form-element-name">Password</div><input name="mypass"/>
<etc.../>
</form>
The cake way of doing this is to do a call to the HTML-Helper like this:
<?php echo $this->Html->css('forms'); ?>
The file has to be in the /app/webroot/css folder for this to work. The extension .css is not needed as the helper adds it automatically.
Don't forget to add the HTML-Helper to your controller var $helpers = array('Html');
If you do it this way you can keep the layout and the content logically separated, which I would call good practice.
Also have a look on the CakeBook for more information about the HTML-Helper.
I would put it in a separate file and make only this view call it for now. That way if you need to make a lot of changes or use it for something else, you can copy/edit the file, or call it into another view.
You want to have all your CSS in as little files as possible. This is because browsers will only download say 2 files at a time and having many different files for each page means waiting time for downloads.
Also you will not be able to leverage browser cache as each separate file will be used once. Instead of the one large file being downloaded on the first page view an then fetched from cache on subsequent page views.
Tl;dr single large files are faster than multiple small files.
