CSS design ideas, such as:CSS Preprocessor、CSS pair image (OOCSS)、Smacss, atomic design and ORGANICCSS, CSS preprocessor the most important features: 1. Connection: By
@importTo
Introducing. CSSFileThe site is very small and is used only as an introduction to reset files and basic generic modules (such as%btn{} definition)2. Extension: definition
%[email protected]；read: Http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases3. Configuration:
$ variable: variable value；store color, grid width, etc. for later modification 4. Mixing:
@mixinName ($ parameter: Default value, $ parameter 2: Default value 2) {}, and then use @include name (parameter value). The key is to use the parameter function rather than the specific value;Note: Focus not only on the. scss,. Less files you have written, but also on the generated. css files. Second, BEM:The naming method is too complex to be considered temporarily;B:block; block-levele:element; elementM:modifier: To modify; Third, OOCSS (CSS object): 1. Take the object thinking, extract the common style of the components in the Web page, define them separately, and use them directly behind them for easy maintenance. such as the button basic style. 2. Coordination:%[email protected];3. The use of frame limits is too large, but can absorb some useful, composed of their own small micro-frame. Iv. SMACSS (Scalable and modular CSS system):Http://smacss.com/https://github.com/jonathanpath/SASS-SMACSS1. Structure: Basic (Base):basic style for a simple selector, such as ClearfixLayouts (layout):Defining Grids
Modules (module):a module, such as a header and a sidebar, that is formed by a combination of elements .
do not define dimensions, only define interrelationships.
Status (State):the different states of the element. Rules such as hide, hold, expand, etc. are defined to the object
Skin (Skins):More Stylesv. Atomic design (atomic concept): Do not useVI, ORGANICCSS (divided into atoms, molecules, organelles, more abstract): Do not use
Compare @include with @extend:
| |
Call object |
css compilation result |
define |
call |
| @include |
@mixin defined function Module (variable, parameter, default) |
css the same style does not merge |
@mixin Name ($ parameter: Default value, $2: Default value 2) {} |
@include Name (parameter, parameter 2); |
| |
.class defined properties module %placeholders defined property Module |
The CSS referenced by the. class compiler may not wanted
The same style that references%placeholder compiled CSS is merged; |
.class{}
% placeholder{} |
@extend. class;
@extend%placeholder; |
Conclusion:for parameters, use the @mixin definition function;Improper use, will produce a lot of duplicate code, no parameters, do not use @mixin
for attributes only, use the%placeholder definition;
the combination of @mixins and%placeholders:
Instance:
a simple percentage grid system: Test availableStarting------------------------------------------------------$columns: 12;
$gutter: 2EM;
%grid {
Box-sizing:border-box;
Display:inline-block;
padding: {
Left: $gutter/2;
Right: $gutter/2;
}
}
@mixin Grid ($width: 1) {
@extend%grid;
Width:percentage ($width);
}
@for $column from 1 through $columns {
. grid-#{$column} {
@include grid (1/$column);
}
} End------------------------------------------------------
CSS Program Ideas
