[Neos] [Poll] Naming conventions on CSS class names

Thomas Allmer d4kmor at gmail.com
Tue Oct 8 11:53:55 CEST 2013


On 08.10.2013 10:22, Robert Lemke wrote:
> Hi Sebastian,
>
> Sebastian Kurfürst wrote:
>> it turns out it's very important to override CSS class names from within
>> TypoScript, without adjusting the Fluid templates behind them.
>>
>> Now, the question is how to name this property in TypoScript. You'll
>> find the corresponding changeset at [1], with the discussion of the
>> current options at [2]. Please go to the following Doodle and vote for
>> the options you like most:
>
> Since we are in TypoScript scope we need to make it very clear which
> "class" is meant (because of @class).
>
> How about htmlClass / htmlClassName?
>
> And consequently imageHtmlClass / imageHtmlClassName?
>
> It's a bit more verbose, but bullet proof.

so this is "just" a convention so everyone could do it as he likes... right?

But as always it's good to have a best practise :)

and as there might be multible html Classes used for different tags I 
would sugguest something like a css path / xpath mix to it?

div[class] = 'container'
div.img[class] = 'right-image'

so you could even use
div[style] = 'padding: 2px;'

yeah but the [] is not really Typoscript..

so how about
div.additionalAttributes.class = 'container'
div.img.additionalAttributes.class = 'right-image'
div.additionalAttributes.style = 'padding: 2px;"

So the first "Part" would be some sort of xpath and then use 
additionalAttributes like you are "used" from the viewhelpers?

or how would you handle style or custom data-* if you "just" use 
htmlClass... would there be htmlStyle as well?

div.htmlClass = 'container'
div.img.htmlClass= 'right-image'
div.htmlStyle = 'padding: 2px;'
  => to lower case?
div.style = 'padding: 2px;'
div.htmlDataStuff = 'stuff';
  => will be "converted" to data-stuff="stuff"?


I would vote for 'additionalAttributes' or 'html' or 'htmlAttributes'...
in fact that looks pretty nice...

div.htmlAttributes.class = 'container'
div.img.htmlAttributes.data-stuff = 'stuff'

using that we may even have the possibility to do some "magic" in the 
fluidtemplate

either use it "normally"
<div class="{div.htmlAttributes.class}" 
style="{div.htmlAttributes.style}"> ... </div>

or do some "magic":
<div {f:htmlAttributes(attributes: div.htmlAttributes)}>

so what do you think?

cheers
-- 
thomas allmer für moodley
mail: thomas.allmer at moodley.at
telefon: +43 (0) 1 581 08 75
www.moodley.at
moodley brand identity gmbh
belvederegasse 26, A-1040 wien
fn 275953 p, atu 62465914


More information about the Neos mailing list