Remove default CSS imports and JS files in Drupal - css

Question

I'm building my first Drupal theme and found out something rather shocking. Drupal 7 imports 10 CSS files by default.
<style type="text/css" media="all">
#import url("http://localhost/drupal/modules/system/system.base.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.menus.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.messages.css?oq6xx1");
#import url("http://localhost/drupal/modules/system/system.theme.css?oq6xx1");
</style>
<style type="text/css" media="all">
#import url("http://localhost/drupal/modules/comment/comment.css?oq6xx1");
#import url("http://localhost/drupal/modules/field/theme/field.css?oq6xx1");
#import url("http://localhost/drupal/modules/node/node.css?oq6xx1");
#import url("http://localhost/drupal/modules/search/search.css?oq6xx1");
#import url("http://localhost/drupal/modules/user/user.css?oq6xx1");
</style>
<style type="text/css" media="all">
#import url("http://localhost/drupal/themes/stark/layout.css?oq6xx1");
</style>
And then this included too (not sure why or what it does)
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/drupal\/","pathPrefix":"","ajaxPageState":{"theme":"stark","theme_token":"3s2kHk4YAL5BDTRW1hanuB6zKdWug7cniWp_uAyRBKk","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"themes\/stark\/layout.css":1}},"urlIsAjaxTrusted":{"\/drupal\/node?destination=node":true}});
//--><!]]>
</script>
I'm building a simple Drupal website from scratch and don't need those 2000 lines of css codes in the frontend. How do I proceed and remove it all? I just need my custom-style.css file and that's it.

Answer 1

You can use hook_css_alter api to remove core and crontributed module default css files.
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_css_alter/7.x
For Javascript check this hook_js_alter: https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_js_alter/7.x
for example:
<?php
function YOUR_THEME_css_alter(&$css) {
// Remove Drupal core css
$exclude = array(
'modules/aggregator/aggregator.css' => FALSE,
'modules/block/block.css' => FALSE,
'modules/book/book.css' => FALSE,
'modules/comment/comment.css' => FALSE,
'modules/dblog/dblog.css' => FALSE,
'modules/field/theme/field.css' => FALSE,
'modules/file/file.css' => FALSE,
'modules/filter/filter.css' => FALSE,
'modules/forum/forum.css' => FALSE,
'modules/help/help.css' => FALSE,
'modules/menu/menu.css' => FALSE,
'modules/node/node.css' => FALSE,
'modules/openid/openid.css' => FALSE,
'modules/poll/poll.css' => FALSE,
'modules/profile/profile.css' => FALSE,
'modules/search/search.css' => FALSE,
'modules/statistics/statistics.css' => FALSE,
'modules/syslog/syslog.css' => FALSE,
'modules/system/admin.css' => FALSE,
'modules/system/maintenance.css' => FALSE,
'modules/system/system.css' => FALSE,
'modules/system/system.admin.css' => FALSE,
'modules/system/system.base.css' => FALSE,
'modules/system/system.maintenance.css' => FALSE,
'modules/system/system.messages.css' => FALSE,
'modules/system/system.menus.css' => FALSE,
'modules/system/system.theme.css' => FALSE,
'modules/taxonomy/taxonomy.css' => FALSE,
'modules/tracker/tracker.css' => FALSE,
'modules/update/update.css' => FALSE,
'modules/user/user.css' => FALSE,
'misc/vertical-tabs.css' => FALSE,
// Remove contrib module CSS
drupal_get_path('module', 'views') . '/css/views.css' => FALSE, );
$css = array_diff_key($css, $exclude);
}
?>