MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to Optimize Your Drupal Site by Enhancing CSS Stylesheets?

Published on 09 July 15
889
0
3
How to Optimize Your Drupal Site by Enhancing CSS Stylesheets? - Image 1
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;
}
}
}
}
}
}
}
}

Let's see how we can clean this up
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.







How to Optimize Your Drupal Site by Enhancing CSS Stylesheets? - Image 1

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.

This blog is listed under Open Source and Development & Implementations Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top