CSS implementation request

[iNSiPiD]

Firstly I'd like to start off by thanking and praising the good work of all the module creators. It is much appreciated.

I just have one small request to make with regards to implementing CSS. There are so many individual classes for all my installed modules now that my stylesheets are becoming unmanageable. Worse still, with Common class names like 'smaller' there is a very real risk of conflicts.

So...a simple suggestion to all you wonderful module writers. Please feel free to tell me if I am speaking out of my @rse but mightn't it be better to use #ids instead of classes and then format your HTML output to make use of the lesser used heading sizes and standard tags?

e.g.

#kalendar {

  font-face: Verdana, Arial, 'courier new';
  font-size: 0.8em;
  margin: 0.2em;
  padding: 0.5em;
  border: 1px #333 dotted;

}

#kalendar h4 {

  font-size: 1.2em;
  color: #666;

}

#kalendar h5 {

  font-size: 1em;
  color: #656;

}

#kalendar th{

  font-style: bold;
  color: #999;
  background-color: #bab;

}

As CMSms grows this will be a great help to people and avoid bloated style sheets. Better still, if you could provide a sample CSS.

Thanks again!

[Ted]

It also might be a good idea to wrap the entire output inside a div with an id or a class.  This way, even if there is an overlap, at least you can target specific items by using the outer class/id AND inner class/id to get to them.  And YES, they should be unique.

To be honest, we should really have a way of documenting either in the help or elsewhere what elements exist.

[nils73]

IMHO it would be best to use unique classes and ids but better NOT use divs ... it takes me hours to get the code clean and lean afterwards which is very important for accessibility issues (as explained in other threads).

Maybe it would be best to associate the name of a module with classes and ids ... like for kalendar it would then be:

#mod-kalendar-small { font-size: x-small; }
.mod-kalendar-big { font-size: x-large; }

Putting a "mod" before all the module entries makes it easier to maintain the classes and load them only if neccessary with an @import later on. Just my 0.02 EUR ...

Regards,
Nils

[iNSiPiD]

That all sounds good to me!

I particularly like the idea of applying a naming convention to the IDs and then using 'unique' classes and smarter HTML output to target the right areas as Nils suggests.

That would go a long way towards aiding accessibility, visual control and the prevention of naming conflicts.

So #mod-kalendar then becomes e.g.:

#mod-kalendar {

  font-size: 0.75em;
  padding: 0.2em;
  margin: 0.5em;
  border: 1px #000 solid;
  color: #000099;
  background-color: #FFF;

}

#mod-kalendar th{

  padding: 0.2em;
  margin: 0.5em;
  border: 1px #000 solid;
  font-weight: bold;
  background-color: #ff0000;

}

#mod-kalendar td {

  padding: 0.2em;
  margin: 0.5em;

}

.mod-kalendar-weekend {

  font-weight: bold;
  color: #FFF;
  background-color: #999900;

}

.mod-kalendar-event {

  font-weight: bold;
  color: 0000FF;

}

etc.