6.4  用drupal_add_css加载css（下） Load CSS with Drupal_add_css (II)

如果你有足够多的前端经验，你一定知道什么是css reset，你也会知道其作用一般是用于清除浏览器默认的渲染样式。而要达到这一点，通常需要让css reset样式表位于其它样式表的前面。那么问题就来了，drupal主题系统会为页面首先加载系统Css，然后加载模块的CSS最后才会加载主题中的CSS。

我们先不讨论css reset在前端中的优缺点和滥用css reset带来的性能损失，我们只假设某个特殊情况下，有一个reset.css的文件需要被第一个加载进网页，应该怎么做呢？

我们首先应该了解一下drupal_add_css的“gruop”参数，它把drupal7中样式表分为三组，它们由三个数值常量表示如下：

CSS_SYSTEM: 系统提供的css， 值 :  -100  

CSS_DEFAULT: 模块提供的css，记住不是CSS_MODULE， 值 :       0   

CSS_THEME: 主题提供的css， 值 : +100   

所有CSS_SYSTEM的样式表会被首先加载，其次是CSS_DEFAULT，最后是CSS_THEME。具体关于group和 weight的说明，请看 https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_css/7

/**

 * Preprocesses the wrapping HTML.

 *

 * @param array &$variables

 *   Template variables.

 */

function yourtheme_preprocess_html(&$variables) {

  $reset = drupal_get_path("theme", "yourtheme") . "/reset.css";

 

  $options = array(

    'group'  => CSS_SYSTEM,

    'weight' => -10,

  );

 

  drupal_add_css($reset, $options);

}

这样，你就把reset.css指定到系统样式表这个组里了，如果你希望它能第一个加载那么还需要对代码进行一处修改：

'group'  => CSS_SYSTEM,

改为

'group'  => CSS_SYSTEM - 1,

不要忘记， CSS_SYSTEM是一个数值常量，值为-100。这样group的值由-100变成 -101,从而保证reset.css始终是第一个加载。