search

nitcalicut / Paathshaala

Social Content Repository for NITC
www.paathshaala.nitc.ac.in
GNU General Public License v3.0
12 stars 7 forks source link

CSS rewrite/port required #15

Closed jaseemabid closed 13 years ago

jaseemabid commented 13 years ago

The existing CSS is a bit messed up. I wrote the major part of it and I agree that it lack proper order or modular structure. I don't expect anything better from CSS because its not the language to write an app of this size.

I would reccomend that we rewrite/port the code base to less or sass or something similar. porting the project to grid frameworks like 960gs or yui grids is not really needed. The above 2 gives features which will make the CSS much more efficient and maintainable.

CSS lack features in a very bad manner. Primarily it gives no options for code reuse. We often write the same block of code many times as rules on different dom objects. I would personally prefer less because we don't have to add ruby (which sass needs) to the project. And automatic compilation from less to css in the client side is a good feature.

Suggestions on new similar frameworks welcome.

jaseemabid commented 13 years ago

The first step can be logically dividing the code base into smaller sections and using @import url("style.css"); rules.

As an example the main box layout is used in a few pages like the home page and profile page. We can split it into box.css and import it into the required page whenever needed.

The problems

  1. More http requests for loading a page

The good parts

Much cleaner code base

We can solve problem 1 this way

  1. Use only 1 css per page.
  2. Import only what is needed.
  3. Modern browsers can pipeline multiple imports in a css script and boost performance

My verdict based on current codebase

Source.php includes 3 stylesheets into the head of each page

<link rel='stylesheet' href='css/structure.css'/>
<link rel='stylesheet' href='css/popup.css'/>
<link rel='stylesheet' href='css/storybox.css'/>

Pages like profile.php and index.php include 1 - 3 extra sheets on average. If we can reduce the total components to comparable values, then this method is good. Now the CSS code is messed up and hard to maintain. A bit of performance overhead is okey for a much better and maintainable code.

nxvipin commented 13 years ago

Why no merge the three files into one, if all of them are included in a page?

jaseemabid commented 13 years ago

Such a mammoth codebase would be a nightmare to manage. A huge single file in result in a lot of merge conflicts and unnecessary load on programmers.

This is how we actually ended up there. See the code included. 

<link rel='stylesheet' href='css/structure.css'/>

Is the template file and that was there since the first version.

<link rel='stylesheet' href='css/popup.css'/>

Handles all popups like feedback etc. It was used only in a few pages in the initial version. Hence a seperate file was there. When we added pop up style feedback and a constant dock, it was added to source.php to propagate to all pages. We can consider merging this to template. 

<link rel='stylesheet' href='css/storybox.css'/>

Mainly handles the box layout with some extra junk. It should be removed from source.php header and added to only pages requiring that. consider it as a bug now. Pages requiring this are index, profile only now i guess.

jaseemabid commented 13 years ago

css performance report, one reason to move to less ( because this is not good.)

One reason to move from core css and think of other ways. Most of the code loaded into pages are unused. We may need only a part of a css and we have to include the whole sheet often. Leads to performance results like this.

Sample video playing page report

9.69KB (34%) of CSS is not used by the current page.

structure.css: 1.50KB (21%) is not used by the current page.
popup.css: 1.97KB (79%) is not used by the current page.
storybox.css: 1.98KB (93%) is not used by the current page.
video-js.css: 1.56KB (13%) is not used by the current page.
video.css: 2.68KB (61%) is not used by the current page.

Home page

3.58KB (30%) of CSS is not used by the current page.

structure.css: 1.52KB (21%) is not used by the current page.
popup.css: 1.84KB (74%) is not used by the current page.
storybox.css: 228B (10%) is not used by the current page.

Profile page

4.62KB (36%) of CSS is not used by the current page.

structure.css: 2.65KB (37%) is not used by the current page.
popup.css: 1.97KB (79%) is not used by the current page.
jaseemabid commented 13 years ago

Moving after enough offline discussions. See the less branch for updates