0
\$\begingroup\$

I have a conf.inc.php file which has the following few lines.

// enable css using convention below:
// $css["pageName"] = ["cssName1", "cssName2", ...]
$css["all"]         = ["style"];
$css["myPage"]      = ["someStyle"];
$css["myOtherPage"] = ["otherStyle", "anotherStyle"];

// disable css
$exCss["myOtherPage"] = ["style"];

What this will do is give all of my pages the style.css. Then all the other keys of the index will give their respective page (e.g. "myPage.php" etc.) the styles listed in the array after the equals (e.g. "someStyle.css").

All of the styles are stored in a folder called "css" and there is no other place to store them as I have hard coded it in - this meant I didn't have to write relative paths in the multidimensional array.

The second array will exclude some styles from their respective page. In this instance the style called style.css is being excluded from the page named myOtherPage.php.

Note: The page names are from a function here. So they only read the file name and ignore extensions etc. This means that "myOtherPage" could also be "myOtherPage.php" or "myOtherPage.html". Although if you look at the following code they will have to be PHP see I use an include in my header of the PHP files.

// print css that are present in all pages
$a = (isset($css["all"])) ? count($css["all"]) : 0;
for ($i = 0; $i < $a; $i++)
    if ((isset($exCss["all"]) && !in_array($css["all"][$i], $exCss["all"])) || (isset($exCss["$page"]) && !in_array($css["all"][$i], $exCss["$page"])) || (!isset($exCss["all"]) || !isset($exCss["$page"])))
        echo (file_exists("{$css["all"][$i]}.css")) ? "<link rel=\"stylesheet\" type=\"text/css\" href=\"{$css["all"][$i]}.css\" />" : "";

This code is part of header.inc.php and this gets placed inside the <head> tags. This will add all the styles from the array providing that style is not listed in the $exCss array.

It is common for me to make things more difficult than they need to be...
This could be another case of that. I also tend to make functions or processes that already exist.

Anyway, I thought I would share this little snippet. If anyone has anyway of improving it then I would love to hear it. Thanks as usual!

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

I'm not sure why you're handling so many CSS files. If you have one CSS file for your application, which is minified and cached on the user's device, you can reduce HTTP requests and overall loading time.

Anyway. If you need to handle lots of these files and keep this approach, you could simplify your code in terms of readability.

Create an array of default CSS files:

$css = ['a', 'b', 'c'];

Create an array where you store the individual files for each page:

$pageCSS = [
    'page-a' => [
        'add' => ['d', 'e', 'f'],
        'remove' => [],
    ],
    'page-b' => [
        'add' => ['g', 'h', 'i'],
        'remove' => ['a', 'b'],
    ],
];

Now you need to test whether a requested page is in this array. If the key exists, add all new files and remove not-needed default files using array_merge and array_diff:

$page = 'page-a';

if (array_key_exists($page, $pageCSS)) {
    $css = array_diff(array_merge($css, $pageCSS[$page]['add']), $pageCSS[$page]['remove']);
}

Finally create all HTML elements. I find it easier to read, if you use single-quotes. This way you don't need to escape all double quotes with backslashes:

foreach($css as $file) {
    print '<link rel="stylesheet" type="text/css" href="' . $file . '.css">';
}
\$\endgroup\$
3
  • \$\begingroup\$ I'm not going to lie. I'm not the best programmer. The reason for lots of CSS files is because that's just what I used to do. I use the same approach for my scripts (with two arrays and add or don't add certain scripts). I can condense some of my CSS together for sure. Regards minimising. Is there a tool of some sort or should I just create a manually shorten it? \$\endgroup\$
    – BritishWerewolf
    Commented Apr 7, 2017 at 18:06
  • \$\begingroup\$ @JustCarty Well, you could take a look into tools like gulp.js to enhance your workflow. You need node.js to run gulp.js. Then you can create a build system, by using different plug-ins to minify your JavaScript and CSS or to help you with other tasks in your workflow. \$\endgroup\$
    – insertusernamehere
    Commented Apr 7, 2017 at 18:50
  • \$\begingroup\$ I've looked into node.js but I didn't know how to install it on my LCN server. Node does always seem a good idea to get into. I thank you for you enlightenment :) \$\endgroup\$
    – BritishWerewolf
    Commented Apr 7, 2017 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.