Main GNOME Website Theme Issues Summary
Fix CSS indentation - This can be fixed using a tool http://tools.arantius.com/tabifier.
Review structure of CSS file (comments, grouped rules) - There are just a few rules that can be grouped according to csscss tool. Another way is to manually check all style sheets and compare rules.
- Review naming of CSS rules - The naming should be checked manually, then compared to css rules in all templates and tested for each changed rule.
Review CSS inherits and unused rules - I ran a couple of tools to check redundancy of css rules in theme(helium- css, W3C CSS Validator, Dust-Me Selectors).The result is, there are round 200 unused rules and the problem is in the testing process after removing all these rules at ones.
Results from GNOME green grass theme css’s analyzes
Tool 1: “csscss” (checks redundancy of css rules)
- gnome-web-www\theme\css\960.css
- {.clear} AND {.clearfix:after} share 5 rules
- gnome-web-www\theme\css\fonts.css
- All Ok
- gnome-web-www\theme\css\friends20.css
←[0;31;49mHad a problem parsing the css at line: 142, column: 1←[0m
←[0;31;49mRun with --show-parser-errors for verbose parser errors←[0m
Note: There was an extra “.” at the end of the file. After removing it there were no repeating rules in the css file.
- gnome-web-www\theme\css\home.css
- {#home_banner a} AND {#home_banner img} share 3 rules
- gnome-web-www\theme\css\news.css
- {.press_list li .date} AND {.press_list li a} share 3 rules
- gnome-web-www\theme\css\project.css
{.categories_list li a} AND {.project .install .options li} share 3 rules
{.categories_list li a} AND {.project .install .options li a} share 3 rules
{.project .install .options li} AND {.project .quick_links li a} share 3 rules
{.project h2} AND {.project_title h1 .generic_name} share 3 rules
{.project .highlights} AND {.project .quick_links} share 3 rules
{.download_button} AND {.project .quick_links li a} share 3 rules
{.categories_list}, {.categories_list li}, {.project .install .options} AND {.project .quick_links} share 3 rules
- gnome-web-www\theme\css\reset.css
- All Ok
- gnome-web-www\theme\css\text.css
- {body} AND {body.win} share 3 rules
- gnome-web-www\theme\editor_style.css
←[0;31;49mHad a problem parsing the css at line: 36, column: 1←[0m
←[0;31;49mRun with --show-parser-errors for verbose parser errors←[0m
Note: The problem was with couple of rules with bad formatting:
- ex.
- grid_3, width: 220px; }
- grid_3 { width: 220px; }
- After fix: {.clear} AND {.clearfix:after} share 5 rules
- gnome-web-www\theme\style.css
{.navigation_list a:focus} AND {.page_title .subpages_list li a:hover} share 7 rules
{#top_bar} AND {.navigation_list} share 5 rules
{.action_box} AND {ul.iconified_menu li a} share 5 rules
{#top_bar a}, {.navigation_list a:focus} AND {.page_title .subpages_list li a:hover} share 4 rules
{.navigation_list} AND {.subtle_box} share 4 rules
{.navigation_list a:focus}, {.page_title .subpages_list li a:hover} AND {ul.iconified_menu li a} share 4 rules
{.navigation_list > li ul li} AND {.simple_list li} share 4 rules
{.navigation_list} AND {ul.iconified_menu} share 3 rules
{.crafted_content .section .thumbs li} AND {.page_title .subpages_list} share 3rules
{.navigation_list > li} AND {.navigation_list > li ul li} share 3 rules
{.navigation_list > li} AND {.simple_list li} share 3 rules
{#footer ul} AND {.navigation_list > li ul} share 3 rules
{.action_button} AND {ul.iconified_menu li a} share 3 rules
{.page_title .subpages_list li a} AND {.simple_list li a} share 3 rules
{.navigation_list} AND {.simple_list} share 3 rules
{#global_domain_bar .tab a.root:last-child} AND {.simple_list li} share 3 rules
{#top_bar a} AND {.simple_list li a} share 3 rules
{.navigation_list} AND {.navigation_list > li ul li} share 3 rules
{.navigation_list} AND {.simple_list li} share 3 rules
{.navigation_list > li} AND {.page_title} share 3 rules
{.crafted_content .section .thumbs li > a} AND {ul.iconified_menu li a} share 3rules
{#global_domain_bar .tab a.root} AND {.navigation_list a:focus} share 3 rules
{#header} AND {.page_navigation} share 3 rules
{.crafted_content .section .thumbs li > a} AND {.crafted_content img} share 3 rules
{#footer .links a:focus}, {#global_domain_bar .tab}, {.action_box} AND {ul.iconified_menu li a} share 3 rules
{#global_domain_bar .tab a.root} AND {ul.iconified_menu li a} share 3 rules
{.navigation_list a:focus}, {.page_title .subpages_list li a:hover} AND {ul.iconified_menu li a:hover, ul.iconified_menu li a:focus} share 3 rules
{.navigation_list}, {.navigation_list > li} AND {.subtle_box} share 3 rules
{.navigation_list} AND {.navigation_list > li ul} share 3 rules
{.navigation_list > li}, {.navigation_list > li ul li}, {.simple_list li} AND {hr} share 3 rules
Note: I merged some of the listed rules. Mainly the ones that can be connected with same selectors or are logically connected.
Tool 2: “helium- css” (javascript tool to scan your site and show unused CSS)
Runing this tool on gnome.org css files resulte with round 100 unused selectors and round 50 to be checked manually. Great thing about this tool is that you can specify more links to pages which are object of analyzes. On the other hand this tool does not list lines where the selectors can be found and the files cannot be exported in comparison to Css Usage firefox add-on where you can export the css files with removed unused selectors.
The results from this two tools can be found here.
Other tools for CSS analyzes:
Tool 3: “W3C CSS Validator”
- gnome-web-www\theme\css\960.css - Ok
- gnome-web-www\theme\css\fonts.css - Ok
- gnome-web-www\theme\css\friens20.css - Ok
- gnome-web-www\theme\css\home.css - Ok
- gnome-web-www\theme\css\news.css - Ok
- gnome-web-www\theme\css\project.css
202
.project .screenshots .prev
Property filter doesn't exist : FlipH
355
.download_button
Value Error : background top is not a color value )
375
.download_button:hover, .download_button:focus
Value Error : background top is not a color value )
381
.download_button:active
Value Error : background bottom is not a color value )
419
.project .quick_links li a:hover
Value Error : background top is not a color value )
- gnome-web-www\theme\css\reset.css - Ok
- gnome-web-www\theme\css\text.css - Ok
- gnome-web-www\theme\editor_style.css - Ok
- gnome-web-www\theme\style.css
840
#footer div.language a span
Value Error : background bottom is not a color value )
Tool 4: “Dust-Me Selectors”(Dust-Me Selectors is development tool that scans your website to find unused CSS selectors.)
In my opinion this is the best tool (from the ones I used) for checking unused selectors in css files. It gives a list with unused selectors in concrete files, it searches all the links from the specified site map so you can be sure that the listed selectors are not used.
For the gnome css files I got result that 198 selectors are not used, from 9 different css files on gnome.org pages. Testing all deleted selectors should be done afterwards so we can be sure if the made changes did not affect the site and did not cause lot of bugs.
Conclusion:
There are many tools that can help you discover what to change in your CSS styles, but the testing process is left to user. If the number of changes is not great as in the “csscss” tool example, this can be done easily, else the process of improving the css files can take a lot of time and effort to get wanted results. It is best to check for better usage during development and while there are not so many rules. Doing the check as the styles changes, can greatly improve the quality of Css implementation.