Some questions about how proper add 2 CSS file in a WordPress theme?

Question

I have the following situation loading a CSS.

I have a WordPress theme that load a style.css settings file by this code into my functions.php file:

/* Function automatically executed by the hook:
 * 1) (OPTIONAL): Register a script (without load it): in this case register the CSS settings
 * 2) Load the CSS settings

 */
function wpb_adding_styles() {
    wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('my_stylesheet');
}

/* Hooks a function on to a specific action (an action is a PHP function that is executed at specific
 * points throughout the WordPress Core)
 * @param 'wp_enqueue_scripts': The name of the action to which 'wpb_adding_styles' is hooked (wp_enqueue_scripts
 *        is the proper hook to use when enqueuing items that are meant to appear on the front end)
 */
add_action('wp_enqueue_scripts', 'wpb_adding_styles');

In this style.css file I define some basic CSS configuration, for example the body settings:

body{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

Then I have create a new style2.css settings file in which I would override\add some of the properties defined into my general style.css, following the previous example I would add the property that the body background have to be black, something like it:

body {
    ........
    ........
    ........
    background: #000;
}

Ok, so I think that I need to load the style.css file using the style2.css file as its dependencies, reading the documentation it seems to me that I can do something like it (or maybe the opposite?):

function load_theme_styles() { 
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'load_theme_styles');

where array() should not be empty but it have to contain the style2.css

Is it a good solution to keep separate a general CSS file that have not to be edited (for example a css file of a CSS framework such as BootStrap with its original settings) and the have a custom CSS file in wich I override the settings that I want to change?

If this is a goog solution can you say me how to pass in the previous array my style2.css file?

UPDATE 1: I have change my wpb_adding_styles() in this way: my main-css depends from style2.css.

function wpb_adding_styles() {

    wp_enqueue_style('style2', get_template_directory_uri() . '/style2.css', array(), '1.0', 'all');
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array('style2'), '1.0', 'all');

}

It seems work well but I am not sure if it is the right solution because if I delete the dependency it work well again

wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');

Tnx

Andrea

Answer 1

It seems like you're using dependencies the opposite way of how they should be used.

In the Wordpress Codex, they try to explain how it's supposed to be used.

$deps (array) (optional)

Array of handles of any stylesheets that this stylesheet depends on. Dependent stylesheets will be loaded before this stylesheet.

Since your style2.css is used to make changes to style.css, it means style2.css is dependent on style.css.

This is what your code should look like:

function wpb_adding_styles() {

    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('style2', get_template_directory_uri() . '/style2.css', array('main-css'), '1.0', 'all');
}

Hope this helps!

Answer 2

The array should contain the handle for style2.css. When you enqueue the first style, you are using main-css, but you had to define that handle beforehand.

Working with inheritance and overwriting in css is a good workflow yes. Especially with frameworks like boostrap. That is the whole point of it. You've got a wonderful base which you can easily extend or modify where needed.

It becomes all the better when you use a tool such as SASS because the css file you include is now all jammed into a single compressed file. http://sass-lang.com/

Cheers