How to Optimize Your Drupal Site by Enhancing CSS Stylesheets?
Published on 09 July 15
Semaphore0
When it comes to enhancing stylesheets, you should firstly understand how the CSS stylesheet for a particular platform works. It will help you control the styles, the how and where you can add the styles. You will also need to regulate the aggregates you can create, and for this purpose you need to be aware of the way you can manipulate this feature.
Your styles, that you would be using, can belong to either Drupal core, styles added within the modules or styles added to the theme. Drupal essentially aggregates the stylesheets from the different groups thus giving you three CSS files. If a stylesheet is added to the theme's info file it will automatically be given the true tick. In case, you add stylesheets by using the drupal_add_css then the every_page flag is set to false. If you want to set it to true, then you should use the optional options array.
<?php
drupal_add_css(drupal_get_path('module', 'custom-module') . '/css/custom-module.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));
?>Preprocessing the CSS Files
Preprocessing your CSS to improve the performance of your website may seem like a great idea. But, if you go ahead with it too often, then you might hit past the 1MB limit with your CSS stylesheets. This is because of nesting divs as well as bad coding practices adopted by Drupal developers. Over nesting of selectors is one path that you should not be treading.
Here is an example of the same
body {
div.container {
div.content{
div.articles{
&> div.post {
div.title {
h1 {
a{
color: #333;
text-decoration: none;
}
}
}
div.content{
p {
font-size: 1rem;
}
ul {
li {
font-style: italic;
}
}
}
div.author {
a.display {
img {
max-width: 100%;
}
}
h4 {
a{
color: #369;
}
}
ul {
;I {
text-transform: uppercase;
}
}
}
}
}
}
}
} a {
color: #369;
}
a {
color: #333;
text-decoration: none;
}
}
h4 {
a {
color: #369;
text-decoration: none;
}
}
p {
font-size: 1rem;
}
li {
font-style: italic;
}
author {
img {
max-width: 100%;
}
li {
text-transform: uppercase;
}
}There is a huge reduction in the byte consumption due to this change that you make to the CSS stylesheet preprocessing, by just getting rid of all the special characters. The amount of time the browser takes to process your style is also substantially reduced with this slight change to the preprocessing and coding practice that you have been involved with.
This blog is listed under
Open Source
and Development & Implementations
Community
Related Posts:
Post a Comment
