less / less/less-docs

Further Notes On Extends

Open
#37 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Less
Stars
680
Forks
442
PR merge metrics
No merged PRs in 30d

Description

things to do, add etc. From the extend documentation

I wanted to leave the extend documentation releasable, however the following are notes that I removed which it may make sense to add later once they have been expanded upon.

Most of this is from @jonschlinkert

Examples for when "extend" will be valuable, and when it won't

The purpose of this section is to better understand how the :extend feature ought be used, thinking in terms of best practices, in order to help prioritize development decisions, and to qualify or disqualify feature requests related to this feature.

Repetitious Code

The :extend feature seems to hold the most promise as a device for:

  1. Selector Inheritance: which means you can add the styles of one selector to other selectors, but without having to manually hunt down and directly edit each of the selectors you wish to extend. Clearly, this is advantageous at the time of need, but it's also helpful with code maintenance.
    2.

:extend directive to a selector (or ruleset of a selector) allows you to add the styles of that selector to any other selectors,

.widget {
  &:extend(ul li, .blob, .kitchensink, .sanity, .willtolive, .questions, .etc);
  background: blue;
}
.widget {
  &:extend(.answers, .blob, .kitchensink, .sanity, .willtolive, .nav, .navbar, .etc);
  background: blue;
}

Don't understand:
Notice that the Extending selector was grouped before the Extended selector. This was chosen not for stylistic reasons, but to be behaviorally consistent with the expected order of inherited declarations within the block.

TODOs:
Specificity
Order of Inherited Declarations
Mixins <-- just do later?

Selectors
Type Selectors
Simple Selectors
Combinators
Pseudo-Elements

Extends with Mixins

TODO: that it is planned

.clearfix():extend() {
  // declarations
}

Extends, Mixins, "Empty" Mixins, and Placeholders

TODO
We want :extend to make our lives easier by DRYing up our stylesheets, but only when :extend cannot "pierce the context barrier" of the selector you wish to extend. So within the same context the goal is to prevent order to prevent :extend from poluting styles

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the existing extend documentation and review the unfinished notes in this issue, including specificity, declaration order, mixins, selectors, combinators, pseudo-elements, and context barriers. Done means the selected topics are expanded into coherent, releasable documentation with examples, or the remaining notes are explicitly removed or deferred.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.