?

Log in

No account? Create an account
fedora 蓝色小药丸

HTML5/Angular/SCSS programming tip

This email excerpt is regarding how to re-use templates and behavior, but make it possible to re-define styles. We are already doing this but not complete.


  • For a re-usable element, the template should have a root element. And this element will have a class that has the same name as this element. This class name will be used in CSS selector for all elements it contains.

  • A re-usable element should have minimum default styles, better have none

  • To share styles, define mixin for this re-usable element, and include them in enclosing element’s styles.

  • Any selector should be shortest possible. Because if an element can be specified with different selectors, it lost uniqueness and its style will be solely based on the order how CSS is included. A unique shortest path makes it possible to override styles. The general rule of thumb is to always include the before mentioned class name of that re-usable element, but no more.



For example, an often used template is “format-1-author”. It was named so because it was initially created as part of format-1 document. Its template should be something like this

<div class=”format-1-author”>
<div class=”image-wrapper”>
<img class=”image”></img>
</div>
<div class=”text-wrapper”>
<author-link
    author-title=”text” author=”author”></author-link>
<div class=”email”>{{email}}</div>
</div>
</div>

And the default style should be empty (just serve as a starting point for any mixin)

.format-1-author{                // note the compiled CSS selector will always have this part
.image-wrapper{
}
.image{                        // note all elements inside this re-usable element do not have conflict class name, the shortest
}
.text-wrapper{
}
.author-link {                 // this is another re-usable element
}
.email {
}
}

Then for a page that included format-1-author, it has to define mixin

@mixin author-page-format-1-author{
@include format-1-author-inline-block(78px);         // this is the mixin to define how to crop author image
.author-link{
@include author-page-author-link;                  // remember author-link is another re-usable element
}
.email {
Font-size: rem(14);                                // and all other customizations
}
}

@mixin author-page-print-format-1-author{
@include format-1-author-inline-block(35px);
.author-link{
@include author-page-print-author-link;
}
}

@mixin author-page-screen-m-format-1-author{
@include format-1-author-block(20px);
.author-link{
@include author-page-screen-m-author-link;
}
}

With all these mixins defined, then the author-page itself, which is a re-usable element, can be defined like below. Due to a historical reason, they currently are defined in separate files. They must either live in separate files or in the same file. Only at this level that “@print” and “@media screen” should be applied, also only at this level SASS/SCSS processing will generate actual contents (all the mixins mentioned before do not generate anything.)

.author-page{
.format-1-author{
@include author-page-format-1-author;
}
}

@print{
.author-page{
.format-1-author{
   @include author-page-print-format-1-author;
}
}
}

@include screen(m){
.author-page{
.format-1-author{
   @include author-page-screen-m-format-1-author;
}
}
}

The benefit of this approach, is to re-use as much as possible, but let each page do not interfere.

Discussion:

1. Style class makes it more specific and no longer unique.

Some element has defined a "styleClass" property to give it a different class upon creation. For example, the "format-1-author" element may have a style-class="author" and then a CSS may be applied to .author rather than .format-1-author. This CSS will conflict with others that uses .format-1-author.

Then there is another question. Should the mixin defined for an element include the default class name or not? It feels strange to add one more level, also caller will look awkward because the mixin is included in its caller, not into  the target class. But on the other hand: it makes it easier to look for styles for a given class.

2. Different situations of styling error: wrong styling, or style did not exist at all, or not specific enough

another kind of error is overwrite the values. a {color } will override a:hover {color}, for example

3. relations between mixin and concrete styles
@extends is useful in reducing duplicate styles, but using @mixin does not exclude that. However, a project should have a priority to reduce confusion

4. one mixin for one thing, or multiple.




Tags:

Comments