asked on

Amend CSS file to only contain the css classes required for test.html. Also CSS to be optimized by removing extraneous css properties etc.

I purchased a website template with style sheet. For various reasons I need to reduce the size of this style sheet. I have deleted the sections I do not need. Have I deleted everything I do not need for this template? I know nothing about CSS. I want to use the same style sheet on several websites by just changing the entries.

The html belonging to this style sheet is:
a2z-internet.com/scriptlance/test.html

The code for style.css is as follows:

/* YUI CSS reset
----------------------------------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
      margin:0;
      padding:0;
}

/* End of reset
----------------------------------------------------------------------------------------------------*/
body {
      background: #000 url(images/body-bg.jpg) repeat top;
      z-index: -100;
      font: 12px Verdana, Geneva, sans-serif;
}
/*header of the page*/
#header {
      z-index: 2;
      height: 78px;
      -moz-border-radius-topright: 8px;
      -moz-border-radius-topleft: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
}
#header img { /* floats logo image left */
      float:left;
}
/*forcontent of the page*/
#content {
      clear: both;
      background: #FFF;
      padding-top: 15px;
      padding-bottom: 15px;
      border-right: 2px solid #000;
      border-left: 2px solid #000;
      font: 12px/18px Arial, Helvetica, sans-serif;
}
/*footer declaration*/
#footer {
      background: #20252B;
      height: 15px;
      color: #6B7B8F;
      width: 960px;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      border-left: 2px solid #000;
      font: 11px Arial, Helvetica, sans-serif;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-bottom: 15px;
      -moz-border-radius-bottomright: 8px;
      -moz-border-radius-bottomleft: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
}
a {
      color: #A63201;
}
#footer a {
      color: #6B7B8F;
}
/* 960 Grid System Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
      margin-left: auto;
      margin-right: auto;
      width: 960px;
}
/* Grid >> 960 Grid System Global
----------------------------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
      display:inline;
      float: left;
      position: relative;
      margin-left: 15px;
      margin-right: 15px;
}

/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
      width:50px;
}
.container_12 .grid_2 {
      width:130px;
}
.container_12 .grid_3 {
      width:210px;
}
.container_12 .grid_4 {
      width:290px;
}
.container_12 .grid_5 {
      width:370px;
}
.container_12 .grid_6 {
      width:450px;
}
.container_12 .grid_7 {
      width:530px;
}
.container_12 .grid_8 {
      width:610px;
}
.container_12 .grid_9 {
      width:690px;
}
.container_12 .grid_10 {
      width:770px;
}
.container_12 .grid_11 {
      width:850px;
}
.container_12 .grid_12 {
      width:930px;
}
/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
      left:80px;
}
.container_12 .push_2 {
      left:160px;
}
.container_12 .push_3 {
      left:240px;
}
.container_12 .push_4 {
      left:320px;
}
.container_12 .push_5 {
      left:400px;
}
.container_12 .push_6 {
      left:480px;
}
.container_12 .push_7 {
      left:560px;
}
.container_12 .push_8 {
      left:640px;
}
.container_12 .push_9 {
      left:720px;
}
.container_12 .push_10 {
      left:800px;
}
.container_12 .push_11 {
      left:880px;
}
/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
      right:80px;
}
.container_12 .pull_2 {
      right:160px;
}
.container_12 .pull_3 {
      right:240px;
}
.container_12 .pull_4 {
      right:320px;
}
.container_12 .pull_5 {
      right:400px;
}
.container_12 .pull_6 {
      right:480px;
}
.container_12 .pull_7 {
      right:560px;
}
.container_12 .pull_8 {
      right:640px;
}
.container_12 .pull_9 {
      right:720px;
}
.container_12 .pull_10 {
      right:800px;
}
.container_12 .pull_11 {
      right:880px;
}

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/*clear between 2 div*/
.clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
}
/*clear after div*/
.clearfix:after {
      clear: both;
      content: ' ';
      display: block;
      font-size: 0;
      line-height: 0;
      visibility: hidden;
      width: 0;
      height: 0;
}
.clearfix {
      display: inline-block;
}
* html .clearfix {
      height: 1%;
}
.clearfix {
      display: block;
}
/* Type styles
----------------------------------------------------------------------------------------------------*/
p {
      padding-bottom: 10px;
}

/* Navigation wrapper styles
----------------------------------------------------------------------------------------------------*/
#nav {
      z-index: 10;
      position: relative;
      background: #333 url(file:///C|/Users/Chris/Desktop/test/images/nav-bg.jpg) repeat-x bottom;
      font: 12px Arial, Helvetica, sans-serif;
      height: 40px;
      border-right: 2px solid #000;
      border-left: 2px solid #000;
      border-top: 2px solid #000;
}
#nav.toprounded {
      -moz-border-radius-topright: 8px;
      -moz-border-radius-topleft: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
}
#nav.bottomrounded {
      -moz-border-radius-bottomright: 8px;
      -moz-border-radius-bottomleft: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom: 2px solid #000;
      border-top:none;
      margin-bottom:15px;
}
.rounded {
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border: 2px solid #000;
      margin-bottom: 15px;
}
/* Sidebar content and nav styles
----------------------------------------------------------------------------------------------------*/
.sidebarbox {
      background: #F0F3F4;
      border: 1px solid #CCC;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      margin-bottom:15px;
      padding-left: 20px;
}
/* Slideshow styles
----------------------------------------------------------------------------------------------------*/
.slide960 {
      height: 175px;
      width: 960px;
      padding:0;
      margin:0;
      overflow: hidden;
}
/* Slideshow navigation styles
----------------------------------------------------------------------------------------------------*/
#slidenav {
      text-align:right; /** change to left or center to reposition navigation **/
      width:100%;
      height:32px;
      line-height:25px;
      font: 11px/25px Arial, Helvetica, sans-serif;
      padding-top:7px;
}

#slidenav a { /*acchor slide*/
      border: 1px solid #000;
      background: #A63201;
      text-decoration: none;
      margin: 0 2px;
      padding: 3px 5px;
      color:#FFF;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
}
/*acchor slide which one active*/
#slidenav a.activeSlide {
      background: #620002;
      border: 1px solid #000;
      color:#FFF;
      font-weight: bold;
}
/*acchor slide focus*/
#slidenav a:focus {
      outline: none;
}
/* Header links/text styles
----------------------------------------------------------------------------------------------------*/
.headerlinks {
      float: right;
      text-align: right;
      margin-top: 10px;
      padding-right: 8px;
      color: #F60;
}

level9wizard

[rincewind666]>> I need to reduce the size of this style sheet

Do you mean reduce the file size? Or are you trying to simply cleanup the file?

If you're trying to reduce the file size, one of the simplest ways is to compress it (remove whitespace, newline characters, redundant characters, etc). Something like http://www.minifycss.com/css-compressor/ should do this fine (you can experiment with the compression dropdown to get varying results). However, you'll want to keep a copy of the original/source style sheet because the compressed version will be less readable when you want to make edits.

If you're trying to cleanup the file, I'd want to identify style elements that aren't even being used - this is a bit more time consuming and manual. For example the "container_12_..." classes all seem very similar, what purpose do they server, could they be condensed/amalgamated - perhaps better served in a table? I'd need to see the HTML doc to understand how those classes are being used.

ASKER CERTIFIED SOLUTION

level9wizard

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rincewind666

ASKER

I purchased this template so the code isn't mine. I agree that the names could be more obvious to what they do.

Just 1 question. The template only mentions the following in the code:

<div class="grid_6 push_3">
<div class="grid_3 pull_6">
<div class="grid_3">
<div class="grid_6">
<div class="grid_6"

Is there a reason why the other like entries are needed for this particular template? Thanks.

SOLUTION

Jesse Matlock

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

level9wizard

[rincewind666]>>Is there a reason why the other like entries are needed for this particular template? Thanks.

It's very likely any CSS classes that aren't being used in your HTML file are there for future use (in other words, they will account for the various layouts this template offers). You could remove them, but you'd run the risk of making it hard to use said functionality later on.

I have to disagree with cloud9manager when he mentions, "Overall, it's an excellent (and a standard) grid system". This is functional CSS code, but it would be a nightmare to manage and grow upon. For example, what happens in 6 months time when you want to make a mobile version of your website? Are you going to have the same number of HTML elements with all those ugly "grid push/pull" names? I'd much rather see <div id="summary"> ..</div> and <div id="blog"> ...</div> to help minimize my layout into a mobile version, rather than fumble with this terribly awkward CSS.

Again, take some time and read through http://csszengarden.com/ - this is going to give you a much better foundation of how CSS/HTML should be approached. Isolate style code from content, it is the best solution for both managing sites [content and style] and building upon them in the future.

Jesse Matlock

* prepare for long response ;)

@level9wizard,
Your opinion is valid, and you're correct in staying that those classes exist for future use. When building large or highly varied layouts, grid systems provide a great deal of flexibility,.. now, given, the 960.gs does have some difficult to learn class/id names.. and although I prefer to use a different grid myself when I code similar templates, the 960 has become a solid frame of reference for grids, along with Yahoo's grid, Blueprint and a few others.

When developing for mobile platforms our team typical uses HTML5 for a more semantic markup (as you mention you prefer as well) and usually codes a minimized CSS to be loaded for that specific use case - so there's no need to load the large grid CSS for a mobile template that you know will not have left or right columns, multiple columns, etc..

Although CSS Garden is a great resource, it does not always reflect the cutting edge of CSS use on the web (though you will find grid systems there too! http://technify.me/demos/960/ ). I prefer to point people more to the top level of designers/developers and learn as much as I can from them (one place I stop often for UI is here: dribbble.com)

The bottom line is that rincewind666 has a template that uses this grid system.. so, there are really 2 options: 1) recode the template to use a less flexible/more proprietary css just for this layout or 2) learn to leverage the power of this grid. And, as he has mentioned the desire to use it for future layouts, I would highly recommend the latter of the two. You can learn more about this grid here: 960.gs and learn about how to use those classes to quickly create new layouts and templates. They even have sample codes, etc.

Again, this is just the perspective of one person,. me :) And I came from the 'world' of one-off CSS sheets to approaching projects in a more Object Oriented way (to use a highly overused term!). the bottom line is that the 960 grid will allow rincewind666 to create layouts VERY quickly, WITHOUT rewriting code.. it is highly flexible and unless he wants to recode this template.. is really the only option.

@rincewind666
Other than cleaning out the design aspects you don't want (rounded corners, etc.) this CSS is ready to go.. and will allow you to create new templates quickly once you learn how the grid works. You can also go here for more understandable explanations of the grid: http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ and here: http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

Best of luck and please let us know if you need anything else or would like further help with this CSS :)

level9wizard

@cloud9manager,
Prepare for a short response: there simply isn't any excuse for such poorly named selectors :) There's a better way to do it, even with very complex layouts.

I'm not saying CSS Zen garden is by any means a one-stop shop for CSS/HTML - if I had to do that (and that's not really fair), I'd reference w3.org. What I'm saying is that there's a very fundamental lesson ZG illustrates fairly well: separate design logic from content. Beginning web-coders can sometimes have a hard time understanding this: "oh, so all of these layouts on zen garden use the exact same HTML, but just have modified CSS - cool!".

Anything else just perpetuates terrible coding practices (at least until there's something better, and this grid style isn't it).

Jesse Matlock

lol.. fair enough. to each their own. I too thought in a very similar fashion to you when I was coding websites and such, and then as our team progressed into developing web applications and other sites with very complex layouts, we found the power in grids :) I do still hand code layouts with their own CSS, and don't always use a grid.. only on specific apps where it is the best course of action. I thoroughly enjoy semantically named/coded CSS selectors :) .. but, what it comes down to here is not what either of us use or prefer.. it comes down to the fact that the user is faced with using this grid or recoding the page. It would probably be easier for him to simply learn how to implement what he has, than coding it from the ground up. I appreciate your perspective and by no means meant any offense, :)

rincewind666

ASKER

Many thanks for your help. Greatly appreciated.

Jesse Matlock

Anytime.. glad we were able to help!

level9wizard

Glad to see this was helpful!