Clean up CSS

An Idea

A lot can be done to improve the CSS throughout the site - do it.

A few suggestions could be:
Existing codeImproved codeNotes
#SkinHomepageListModule { margin-top:262px }
#MapHomepageListModule { margin-top:262px }
#FeaturesListModule + div.ContentColumn, #FeaturesListModule + div.ContentColumn + div.ContentColumn { margin-top:262px; }
Move FeaturesListModule div to ColumnGrid instead of ContentColumn.
function vSetFluidColumnWidths()
.FluidColumn { width:250px;}
Replace JS with CSS (also, why the hell would that function be run on every resize? It doesn't do much of anything)
.slides_container div.Slide
div.Slide
Also goes for any other extra selectors. No reason to bloat up the CSS file
.Module h3 img { vertical-align:middle }
.Module h3 a { vertical-align:middle }
.Module h3 img, .Module h3 a { vertical-align:middle }
Also goes for any other duplicate properties
#TutorialHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#TutorialHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#MipHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#MipHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#ModelHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#ModelHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#PrefabHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#PrefabHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#TextureHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#TextureHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#WipHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#WipHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#ProjectHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#ProjectHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#StudioHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#StudioHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#HelpWantedHomepageListModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#HelpWantedHomepageListModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
#DevhubIntroModule h3 { background:url(http://files.gamebanana.com/static/img/devhub_header_bg.gif); border:1px solid #c09a52 }
#DevhubIntroModule h3 a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
h3.devHub { background:url(http://files.gamebanana.com/stat
ic/img/devhub_header_bg.gif); border:1px solid #c09a52 }
h3.devHub a { text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black }
Come on now... Use class', for gods sake
#WipHomepageListModule li { display:inline-block; width:150px }
#WipHomepageListModule div.Preview { width:150px; height:70px }
#PrefabHomepageListModule li { display:inline-block; width:150px }
#PrefabHomepageListModule div.Preview { width:150px; height:70px }
#ModelHomepageListModule li { display:inline-block; width:150px }
#ModelHomepageListModule div.Preview { width:150px; height:70px }
#TextureHomepageListModule li { display:inline-block; width:150px }
#TextureHomepageListModule div.Preview { width:150px; height:70px }
#MipHomepageListModule li { display:inline-block; width:150px }
#MipHomepageListModule div.Preview { width:150px; height:70px }
#StudioHomepageListModule li { display:inline-block; width:150px }
#StudioHomepageListModule div.Preview { width:150px; border:0 }
#ClubHomepageListModule li { display:inline-block; width:150px }
#ClubHomepageListModule div.Preview { width:150px; border:0 }
.smallPrev li { display:inline-block; width:150px }
.smallPrev .Preview { width:150px; border:0 }
See above
And those are only in the Index.css file... The Core.css would be quite an undertaking. Ever considered running your code through one of the many CSS beautifiers/linters out there? Obviously very, very low priority, but I just figured I'd post this here, since I've been digging through the sites code for a Chrome extension I'm working on (where some of this - especially the FeatureListModule position - came in the way). I might update this when I stumble upon other similar things. EDIT: Updates incoming!
Existing codeImproved codeNotes
body { padding:0 10px; font:12px 'verdana'; word-wrap:break-word }
body { background:#1A1C1F; color:#E2E2E2 }
body { padding:0 10px; font:12px 'verdana'; word-wrap:break-word; background:#1A1C1F; color:#E2E2E2 }
Also counts for other duplicate declaration blocks
input[type="radio"] { outline:0 }
input[type="checkbox"] { outline:0 }
input[type="radio"], input[type="checkbox"] { outline:0 }
select:hover { }
select:focus { }
Also counts for other empty declaration blocks
div#PointsMeterTooltip li.AchievedSublevel { padding:0 0 0 7px }
div#PointsMeterTooltip li.UnachievedSublevel { padding:0 0 0 7px }
div#PointsMeterTooltip li.AchievedSublevel, div#PointsMeterTooltip li.UnachievedSublevel { padding-left:7px; }
There are plenty of examples of unnecesarry things like this - another is padding:10px 0 10px 0; that can simply be written as padding:10px 0;
img.AgeLevelBar1 { background-position:-82px -52px }
img.AgeLevelBar2 { background-position:-77px -52px }
img.AgeLevelBar3 { background-position:-72px -52px }
img.AgeLevelBar4 { background-position:-67px -52px }
img.AgeLevelBar5 { background-position:-62px -52px }
img.AgeLevelBar6 { background-position:-57px -52px }
img.AgeLevelBar7 { background-position:-52px -52px }
.AgeLevelBar1, .AgeLevelBar2, .AgeLevelBar3, .AgeLevelBar4, .AgeLevelBar5, .AgeLevelBar6, .AgeLevelBar7 { background-position:-52px -52px }
Search the source code for it. There are plenty more where this is coming from. Also consider replacing the 6 class' with a single class.
span.LessThan5minsOld { color:#FF4E4E; }
span.LessThan30minsOld { color:#FF4E4E; }
span.LessThan1HourOld { color:#FF4E4E; }
.LessThan5minsOld, .LessThan30minsOld, .LessThan1HourOld { color:#FF4E4E; }
Also consider shorter, yet just as descriptive, class names (example could be "lt5min", or simply "5min")
Couldn't be arsed to do any more. Another thing to note is that simply running it through an online tool, such as [CleanCSS](http://www.cleancss.com/), dropped the size of the Core.css file by almost 10KB. That's quite an improvement for an automatic tool, especially when the readability still stays high.

Ratings

Ghost1229127 Rating icon loves this 6y Rafael De Jongh avatar
Rafael De Jongh
Apocalyptic Flag
Affiliation
Apocalyptic
Rating icon loves this
6y
Kosai106 avatar
Kosai106
Avenger Corp.™ Flag
Affiliation
Avenger Corp.™
Rating icon loves this
6y
Clener74 avatar
Clener74
Pyro-Zone Flag
Affiliation
Pyro-Zone
Rating icon loves this
6y
  • birjolaxew avatar
    birjolaxew username pic Joined 8y ago
    Offline
    4,325 points Ranked 1493rd
    2 medals 1 legendary
    • 1st Place - Tutorial Contest Medal icon
    • Received thanks 5 times Medal icon
    6y
    > **Posted by Logan Dougall** > box models often act strange between browsers, only reason I ask. I see your point. None of those actually change the attributes applied, though, they just apply them in a smarter, cleaner way (well, the moving of the FeaturesListModule might mess something up, but it's unlikely). I'll have to look out for that in the future for sure.
    URL to post:
  • Logan Dougall avatar
    Logan Dougall username pic Joined 13y ago
    Admin
    Offline
    Half Life Storm Flag Affiliation: Half Life Storm
    20,085 points Ranked 245th
    40 medals 3 legendary 9 rare
    • Achieved Admin clearance Medal icon
    • 500 posts awarded Exemplary Feedback Medal icon
    • 10 years a member Medal icon
    • 50 posts awarded Exemplary Feedback Medal icon
    • 100 posts awarded Exemplary Feedback Medal icon
    • 200 posts awarded Exemplary Feedback Medal icon
    Logan Dougall avatar
    Logan Dougall
    Half Life Storm Flag
    Affiliation
    Half Life Storm
    Admin
    6y
    box models often act strange between browsers, only reason I ask.
    Structural Designer / Dad :)
    URL to post:
  • birjolaxew avatar
    birjolaxew username pic Joined 8y ago
    Offline
    4,325 points Ranked 1493rd
    2 medals 1 legendary
    • 1st Place - Tutorial Contest Medal icon
    • Received thanks 5 times Medal icon
    6y
    > **Posted by Logan Dougall** > Have you already checked your changes for all browsers to display the same? None of those use any special CSS syntax, to avoid cross-browser issues - the most advanced selector is the adjacent selector (+) which is supported all the way down to IE7 (according to this website) that being said, I have not tested these in any other browsers than Chrome and Safari - it's late, I'm tired, and I'm on my laptop where those are the only ones I have installed. If anyone would be so kind as to test some of them for me, that'd be great. Otherwise, I'll do it sometime tomorrow.
    URL to post:
  • Logan Dougall avatar
    Logan Dougall username pic Joined 13y ago
    Admin
    Offline
    Half Life Storm Flag Affiliation: Half Life Storm
    20,085 points Ranked 245th
    40 medals 3 legendary 9 rare
    • Achieved Admin clearance Medal icon
    • 500 posts awarded Exemplary Feedback Medal icon
    • 10 years a member Medal icon
    • 50 posts awarded Exemplary Feedback Medal icon
    • 100 posts awarded Exemplary Feedback Medal icon
    • 200 posts awarded Exemplary Feedback Medal icon
    Logan Dougall avatar
    Logan Dougall
    Half Life Storm Flag
    Affiliation
    Half Life Storm
    Admin
    6y
    Have you already checked your changes for all browsers to display the same?
    Structural Designer / Dad :)
    URL to post:
  • Rafael De Jongh avatar
    Rafael De Jongh username pic Joined 11y ago
    Ripe Supporter WB Manager Super Moderator
    Offline
    Apocalyptic Flag Affiliation: Apocalyptic
    28,711 points Ranked 164th
    79 medals 12 legendary 20 rare
    • 1st Place - Winter Textures Contest Medal icon
    • 1st Place - GameBanana Around the Globe Contest Medal icon
    • 1st Place - Sci-Fi Skinning Contest Medal icon
    • 1st Place - Winter Warfare Medal icon
    • 1st Place - Movie Replicas Modeling Contest Medal icon
    • Submitted 100 WiPs Medal icon
    Rafael De Jongh avatar
    Rafael De Jongh
    Apocalyptic Flag
    Affiliation
    Apocalyptic
    Skinning/Modelling Expert
    6y
    Indeed some things might really improve the site with just some slight css edits!
    Web Developer & 3D Artist avatar
    Mantra
    Web Developer & 3D Artist
    URL to post:
  • Clener74 avatar
    Clener74 username pic Joined 7y ago
    Turned off.
    Pyro-Zone Flag Affiliation: Pyro-Zone
    55,136 points Ranked 70th
    30 medals 8 rare
    • 50 posts awarded Exemplary Feedback Medal icon
    • 100 posts awarded Exemplary Feedback Medal icon
    • 200 posts awarded Exemplary Feedback Medal icon
    • Returned 1000 times Medal icon
    • Reached 50 subscribers Medal icon
    • 8-14 Entries! GameBanana’s Christmas Giveaway 2016 Medal icon
    Clener74 avatar
    Clener74
    Pyro-Zone Flag
    Affiliation
    Pyro-Zone
    Bug Journalist
    6y
    It's for the better of the site so...
    No one beats me at Puyo Puyo. avatar
    Mantra
    No one beats me at Puyo Puyo.
    URL to post:

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Summary

+8
8 in favor
0 against
  • Loved icon
    Loved
    100% (4/4)

Submitter

birjolaxew avatar
birjolaxew username pic Joined 8y ago
Offline
4,325 points Ranked 1493rd
2 medals 1 legendary
  • 1st Place - Tutorial Contest Medal icon
  • Received thanks 5 times Medal icon
birjolaxew avatar
birjolaxew

Sign up to access this!
Sign up to access this!
Sign up to access this!

Details

Type
Complaint
Resolution
Unknown

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 783
  • 6
  • 6y
  • 6y

More from Submitter

New ads? Ya' serious?
New ads? Ya' serious?
+8
Votes
12 in favor
4 against
Cannot Address
Template Example Code Disallowed
+6
Votes
6 in favor
0 against
Allow HTML5 tags
+10
Votes
10 in favor
0 against
Allow Interaction-Based Javascript in Übers
+5
Votes
9 in favor
4 against