Re: css block re-use proposal

Hello,

I do not say that multiple css classes per element + selector combinations of those do not have a use, they do have - as your sprite example shows.

If you care about semantic web, you will know that "applications change", "data is forever". And I am not talking about the few big online applications but the trillions of html documents out there. HTML documents will stay as they were / are / will be ... for ages. Argumenting in favour of adding unnecessary classes just for the purpose of presentation moves HTML closer to a presentational markup and away from semantic markup. Having html markup that you can "open" and "read" without a user agent at all and understand its "meaning" is a great goal, for preservation of information as well as for accessibility. Reducing document sizes is not wrong either. Even if a stylesheet grows you could apply it two a bunch of documents and still save overall storage/traffic.

What Eric Twilegar suggested, and what I support, in result means that there is *less html* code (fewer class declarations) and /at the same time/ *less css* code to achieve the same presentational functionality. As CSS grows in features and functionality having another "method" of grouping style properties but by selectors would be handy. One of these methods is aspects/themes.

Both, mine and his suggestion, might be bad implementations - but I really want to see arguments against the basic concept/idea (I am sure there are strong arguments).

King regards
 Jonas


On 2010-10-28, at 17:52, GreLI wrote:

> Yes it's a hack just to answer "purist". I can give you one example when multiple classes are useful: image sprites.
> Imagine: you have generic class like
> 
> .sprite {
>    display:inline-block;
>    width:16px;
>    height:16px;
>    background:url(sprite-generic.png) no-repeat;
> }
> 
> and TONS of classes with background-position, different sizes when needed etc:
> .sprite1
> .sprite2
> ...
> .sprite15
> ...
> 
> Instead of .sprite declaration you can make a comma-separated list or copy
> properties to each of them. Both ways unnecessary bloats CSS files (even
> if you use macros or other tricks in development version in production
> it'll be huge) and thus make user to wait first time when he came to site
> which is undesirable (user will likely leave site).
> Or you can just add a little class for every element. It's a real minor addition
> comparing to content especially if you have gzip on and use minimizers.
> 
> BTW in your case font-styles, text-shadows and so on inherits so there are
> not many additional classes needed really. You can set it to containing block.
> 
> 
> On Thu, 28 Oct 2010 19:30:16 +0400, Jonas Hartmann <j0n4s.h4rtm4nn@googlemail.com> wrote:
> 
>> Hello,
>> 
>> while this is nice convention + CSS3 use, its still a /hack/ on class selector because all you did is faking .someRealClassOnDiv.one {} with .someRealClassOnDiv-one {}.
>> Imagen you have a website with some things that should look boxy, some things that should look text-shadowy, some things that should have one style of "attention" e.g. two or three sets of combined "font-styles". What you could do today is grouping a bunch of selectors around those aspects and apply them this way, and use a comment to specify things as an aspect.
>> 
>> 
>> On 2010-10-28, at 17:10, GreLI wrote:
>> 
>>> Thinking on it I found one more way that doesn't require extra class:
>>> [class^="someRealClassOnDiv"]
>>> /* classes starting with "someRealClassOnDiv" */
>>> {
>>>     border-style:solid;
>>>     border-width:1px 1px 0;
>>> }
>>> 
>>> .someRealClassOnDiv-one {
>>>     border-color:green;
>>> }
>>> .someRealClassOnDiv-two {
>>>     border-color:blue;
>>> }
>>> 
>>> CSS3 selectors are really powerful tool.
>>> 
>>> 
>>> On Tue, 26 Oct 2010 02:20:20 +0400, Eric Twilegar <Eric.Twilegar@onpeak.com> wrote:
>>> 
>>>> Many times in CSS I find myself copying and pasting the exact block of CSS statements from block to block.
>>>> 
>>>> It would be nice if in CSS you could reference one block of CSS inside of another block.
>>>> 
>>>> I would suggest that we could create a block with a name perhaps using the $ character to start it. Then refer to it in another block like an include so that the CSS lines are copied in.
>>>> 
>>>> 
>>>> $bottomLessBorderStyleGroup
>>>> {
>>>>     border-style:solid;
>>>> 
>>>>     border-top-width:1px;
>>>>     border-left-width:1px;
>>>>     border-right-width:1px;
>>>>     border-bottom-width:0px;
>>>> }
>>>> 
>>>> ..someRealClassOnADiv
>>>> {
>>>> $bottomLessBorderStyleGroup
>>>> }
>>>> 
>>>> 
>>>> For now I'm implementing something similar by generating the CSS server side, but it would be nice to not have to go to a pre-processor.
>>>> 
>>>> 
>>>> et

Received on Friday, 29 October 2010 18:45:53 UTC