ansaurus

Question

Answer 1

+1 A:

If it's just for four buttons, I'd pull the page up in a modern browser and use a development toolkit (Firebug in Firefox, Dragonfly in Opera, the WebKit developer tools in Safari/Chrome) to inspect the buttons in question and see what the effective styles are on each.

ngroot 2010-08-31 15:53:51

Answer 2

A:

You might want to go over this article I read not too long back, it has a really good overview of the pro's and con's of organizing your css. I'd also take a look at the bottom of the article it has some links to some more information.

From the looks of things your widget styles did seem to go a little overboard with the classitis, but at least its documented, I can't count the number of times I've seen undocumented css classes.

mwgriffith 2010-08-31 15:54:23

Answer 3

A:

i think that you need to change the name of your clases, i see that you are using ".apl_widget_label" for almost everything and styling the element depending on the selectors.

for example:

/* the gray label in the panel 
   enforce for mini display */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {

why not create another class called "mini-display" and then your element would be like:

<div class=".apl_widget_label mini-display">..</div>

and your css would be:

.mini-display{..}

if you don't like it... i've seen some people that creates the classes like this

<div class="left margin-auto big red ...">..</div>

where each class changes something specific on the element (i.e left => float:left;). And they have like a library of classes that they always use.

pleasedontbelong 2010-08-31 16:13:27

Answer 4

+3 A:

The following are just comments; It's hard to give definitive answers to questions like this, esp. when the HTML structure is not available.

The first thing that really got me was the long class names. When you've got so much repetition within the name of the classes, I think you're doing something wrong. Names like

.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img

Really should be shortened to (something like):

.apl_widget .fourlevel .panel img

Especially when your selectors are basically 90% repetitive, like

.apl_widget_level.apl_widget_level1

There's just no point for this! In CSS, the cascade guarantees inheritance, so adding a prefix too all your class names is just necessary. Surely if you've gotten to the point of indexing your class names, its time to swap them out for ids, like

#level1

It may seems small, but it really does make CSS more maintainable if you've got selectors that are compact and less repetitious - at least you won't be spending so much time scanning through selectors.

If the HTML structure of the widget is the same throughout the code, then you can actually swap out some of the classes for elements. It will of course reduce style reusability, but given that widgets are often do not share the same structure and design as the rest of the page, it should be possible for simpler widget styles to skimp on classes. Selectors like (say)

.profile img

would certainly be better than to just give that img a class - its both immediately obvious what you're doing, and easy to maintain at the same time.

Something else you might want to do is to only code for special cases, like this very simplified case

a {
  color: white;
  background: #666;
  text-decoration: none;
}

a.special {
  color: #B8E9FF;
}

a.brilliant {
  color: #FFAFAF;
}

Also, remove the repeated classes that stays the same within each case. Again, use the Cascade to its full potential.

3-5 selectors max is not unusual. 3-5 for every one of them is, though. The CSS selectors should logically go from simple to complex, as more cases are added. Thus, try finding the base of the widget, define a default, and code your way up.

The code snippet itself is not too bad except for the inclusion of too many and overly long class names. Rewriting from the bottom up though can often lead to optimizations, esp. if the requirements of the project has changed since the last developer (We don't need to support IE6 anymore, hurray!) But again, without seeing the structure it's hard to make definitive solutions.

Yi Jiang 2010-08-31 16:16:45

v. good points here

Bobby Jack 2010-09-02 14:16:43

Answer 5

+1 A:

Based on the posted HTML I'd suggest following changes:

The inner classes apl_widget_label and apl_widget_value are unnecessary and can simply replaced with unique elements (that is unique within the li). This may make the selectors slightly longer, but much better structured and more readable. Also the div around the link is unnecessary as the link can be styled directly.

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div>Level </div><a href="#">1</a>
    </li>
   ...

with

.apl_widget_content li div {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.apl_widget_content li.selected div {
    padding-top: 15px;
}
.apl_widget_content li a {
    font-size:24px;
    margin-top:10px;
    text-decoration:none;
    color:#FFF;
    display: block;
}
.apl_widget_content li.selected a {
    margin-top:15px;
}

You also can move the top, width and height properties in the level rules to the ul.apl_widget_content li(.selected) rules:

ul.apl_widget_content li {
   ...
   top: 0px;
   width: 86px; 
   height: 133px;
}

ul.apl_widget_content li.selected {
    width:102px; 
}

#apl_widget_level1 {
    background-position: -13px -300px;
}

It would be great if you could get rid of the "selected level" IDs (the ones ending with s), but I can't think of a reasonable way which still supports IE6.

I just see that you have set the li to display: inline while keeping block elements insde them. You'll need to be careful with that, because despite being technical correct CSS its exact rendering is not really defined. You may consider display: inline-block or float: left instead.

RoToRa 2010-09-02 14:11:22

And I like this. I am coming away with the impression, though, that there are no good tools for refactoring or rationalizing CSS. Changing to display:inline-block and float:left did not change the appearance in FF. I imagine that is what you expected.

hughdbrown 2010-09-03 18:55:38

I created good CSS for compliant browsers, but had the "double margin float bug" and the "collapsed parent of float element" bug in IE6. Ended up fixing with "display: inline;" which, you point out, is not accurate CSS.

hughdbrown 2010-09-09 17:13:54

I still wish there were tools for this.

hughdbrown 2010-09-09 17:14:13

ansaurus

tags:

views:

answers:

How to simplify CSS code

related questions