is there anyway write following code without individual blocks each parent?
#parent1 { #parent1child1 { display: none; } } #parent2 { margin-top: 1em; margin-bottom: 1em; } #parent1, #parent2 { .child2 { display: none; margin-top: 1em; .textbox { width: 97%; } .anchor { margin-right: 0.5em; } } } i'm trying remove need have blocks each parent , use sort of not operator within overall block style individual parents.
a concern have
as can tell comments under onetrickpony's answer, not find solution acceptable @ (even though of initial writing of "accepted" answer). while creative solution "working," production of pointless selectors #parent2#parent1 #parent1child1 produces, , annoying redundancy of #parent2#parent2 selector makes seems lackadaisical , uncaring proper coding. whether onetrickpony has such attitude unclear, though seems further evidenced comment "the point of using css preprocessor save development time, not generate efficient css." in opinon, both should goal. here specific output of solution , find unacceptable:
css output of onetrickpony's nested parent calls using & objections noted
#parent1#parent2, /* <- pointless selector */ #parent2#parent2 { /* <- ugly , redundant (potentially buggy?) selector */ margin-top: 1em; margin-bottom: 1em; } #parent1#parent1 #parent1child1, /* <- ugly , redundant selector */ #parent2#parent1 #parent1child1 { /* <- pointless selector */ display: none; } #parent1 .child2, #parent2 .child2 { display: none; margin-top: 1em; } #parent1 .child2 .textbox, #parent2 .child2 .textbox { width: 97%; } #parent1 .child2 .anchor, #parent2 .child2 .anchor { margin-right: 0.5em; } it's not helpful criticize, felt necessary @ least offer solution issue besides critiquing existing answer given it. answer have come sooner if site use test less had not been down.
three ideas reduce code
your title question asks different stated requirements within question. title states: "maintain individual parent styling whilst including child in multiple parents," implies inclusion of child code in individual parent styling (while not having reduplicate code). this, see solution #2 below. requirements in question restated differently, "is there anyway write following code without individual blocks each parent," narrows requirements of title specific solution of defining in 1 code block (which believe poor coding practice, becomes far less clear happening... , onetrickpony noted op's original code more clear solution offering). achieve parent grouping in css while keeping code clarity , shortness in less, see solutions #3a , #3b.
however, i'm going start solution #1, first step , reexamine whether or not nesting needed. op can determine based off site requirements, if not necessary, solution #1 best--everything kept separate. if nesting needed, solution #3b closest op desires.
solution #1
this points out obvious many times people design nesting when nesting not needed. if not .child2 elements exist outside of #parent1 or #parent2 wrapper, there no need have css nested relationship. exception specificity override because .child2 has other styles applying need overridden, , needs added specificity of id parent.
#parent1 { #parent1child1 { display: none; } } #parent2 { margin-top: 1em; margin-bottom: 1em; } .child2 { display: none; margin-top: 1em; .textbox { width: 97%; } .anchor { margin-right: 0.5em; } } solution #2
this keeps parents separate, keeps clarity of expected 2 different sets of styling rules them. uses mixin keep .child2 code having entered once. more how less designed work including repeated code in selectors.
#parent1 { #parent1child1 { display: none; } .makechild2code(); /* call mixin generate code */ } #parent2 { margin-top: 1em; margin-bottom: 1em; .makechild2code(); /* call mixin generate code */ } .makechild2code() { .child2 { display: none; margin-top: 1em; .textbox { width: 97%; } .anchor { margin-right: 0.5em; } } } this solution result in excess css code "bloat," difference here onetrickpony's answer code bloat has purpose , meaning rather being pointless , unmeaningful. resulting css is:
#parent1 #parent1child1 { display: none; } #parent1 .child2 { display: none; margin-top: 1em; } #parent1 .child2 .textbox { width: 97%; } #parent1 .child2 .anchor { margin-right: 0.5em; } #parent2 { margin-top: 1em; margin-bottom: 1em; } #parent2 .child2 { display: none; margin-top: 1em; } #parent2 .child2 .textbox { width: 97%; } #parent2 .child2 .anchor { margin-right: 0.5em; } solution #3
both of these use functionality of :extend() found in less 1.4+ group parents together. how latest version of less intended used such situation.
opt "a"
this uses fact #parent1child1 should unique page , not need reside under #parent1 in cases (however, there legitimate cases such nesting of id's). assumes #parent1 not have other properties need applied that not apply to #parent2.
#parent1 { .child2 { display: none; margin-top: 1em; .textbox { width: 97%; } .anchor { margin-right: 0.5em; } } } #parent1child1 { display: none; } #parent2 { margin-top: 1em; margin-bottom: 1em; &:extend(#parent1 all); /* causes #parent1 selector become #parent1, #parent2 in output css, making connection .child2 */ } this produces grouped css parent .child2 relation:
#parent1 .child2, #parent2 .child2 { display: none; margin-top: 1em; } #parent1 .child2 .textbox, #parent2 .child2 .textbox { width: 97%; } #parent1 .child2 .anchor, #parent2 .child2 .anchor { margin-right: 0.5em; } #parent1child1 { display: none; } #parent2 { margin-top: 1em; margin-bottom: 1em; } opt "b"
this best solution grouping , code clarity/conciseness in less, , keeps nesting of id's op had , allows #parent1 have own properties if needed:
#parent1 { #parent1child1 { display: none; } .child2 { /* define child element first in #parent1 */ display: none; margin-top: 1em; .textbox { width: 97%; } .anchor { margin-right: 0.5em; } } } #parent2 { margin-top: 1em; margin-bottom: 1em; .child2 {&:extend(#parent1 .child2 all);} /* extend child def #parent2 */ } this produces css parents nicely grouped well:
#parent1 #parent1child1 { display: none; } #parent1 .child2, #parent2 .child2 { display: none; margin-top: 1em; } #parent1 .child2 .textbox, #parent2 .child2 .textbox { width: 97%; } #parent1 .child2 .anchor, #parent2 .child2 .anchor { margin-right: 0.5em; } #parent2 { margin-top: 1em; margin-bottom: 1em; } this reversed (the #parent2 contain .child2 definition, , #parent1 extended it, place combined code following #parent2).
summary: solutions #1 or #3b best imagine op's actual needs may be.
Comments
Post a Comment