Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other How To Combine Multiple Classes into common css rule

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #250242
    Niks
    Participant

    Hi Chris,

    Hope you are doing well.

    I usually write all the CSS per each class or id, and at the end I group them together per shared styles.

    Is there a tool that automatically groups common shared styles between selectors?

    Example :
    .first {width:100px; height:35px}
    .second {width:100px;}

    Result :
    .first, .second {width:100px;}
    .first{height:35px;}

    Thanks,
    Niks – Web Designer

    #250243
    Atelierbram
    Participant

    While not being Chris ;) guess you will have to look into build-tools, like this postcss sorting plugin. Mind you, this requires a dedicated effort, editing config files and setting up this build environment.

    #250244
    Niks
    Participant

    Hello Atelierbram,

    Thanks for your quick response.

    I need tools for static css “automatically groups common shared styles between selectors?”

    #250245
    Atelierbram
    Participant

    Yes, … well I guess it will have to be some kind of pre- or post-processing build tool (which groups shared CSS property-value pairs on selectors) to solve this problem. Sass, Less, Stylus et. al. can do this with extends. But this is a tricky one I think for it will not working on media-queries, if I’m not mistaken.
    You also may want to look into DRY CSS

    #250246
    Niks
    Participant

    @Atelierbram

    Thanks for help me :)

    I have idea about extend keyword for using Less and Sass language.

    But i need the tool for static CSS “Is there a tool that automatically groups common shared styles between selectors?”

    #250247
    Atelierbram
    Participant

    Not a tool, but a methodology: DRY CSS

    CSS handwork ;)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Other’ is closed to new topics and replies.