This installment doesn’t cover framework updates, so let’s take a look at the various CSS styles. I guess it’s all about borrowing from each other.

BEM

<ul class="menu">
	<li class="menu__item menu__item--selected"></li>
	<li class="menu__item"></li>
	<li class="menu__item"></li>
</ul>
Copy the code

Menu is a block, item is an element, and selected is modify. Relatively speaking, it has no priority issues.

Since our pure CSS is oriented towards front-end pages, priority issues are still relatively rare. Some interactive UI frameworks mostly use this type.

OOCSS

It looks something like this, more like helper classes.

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
Copy the code

Or this way, I added a namespace s here. When combined with BEM, it looks like this.

.btn
.btn--small
.btn--red
.btn--blue
.btn--large
Copy the code

SMACSS

  • Base Rules (global reset style, etc.)

  • Layout Rules are prefixed with l- or Layout -, such as. L -header and. L -sidebar. I have seen jingdong use this shorthand, but he will add a note that the abbreviation of layout is L.

  • Module Rules Specifies the name of the Module, such as. Media and. Media-image.

  • State Rules are prefixed with IS -, for example,. Is -active and. Is -hidden. For example, some modifiers in Bulma actually start with is or has.

  • Theme Rules If used as a separate class, use the Theme – prefix, such as. Theme -a-background and. Theme -a-shadow.

.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}
Copy the code

It can also be customized

.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}
Copy the code

The individual files in Vue, which are modules, will have their own module IDS prefixed with scoped, and React also has something called CSS-blocks.

CSS-BLOCKS

React class names are automatically shortened. React class names are automatically shortened. I don’t have much experience in React, so I haven’t really practiced and studied this framework.

Scope is constrained by scope, and state is created by state, such as active state, unavailable state, and so on.

However, it also has some disadvantages or strong conventions, some pseudo-classes do not support nesting, attribute selectors, ID selectors, etc.

: the scope of {} : scope [the state | enabled] {}. The sub - element {} / / any value, Of no value. Sub - element [the state | color] {} / / special values. The sub - element [the state | color ="red"] { }
.sub-element[state|color="blue"] { }
.sub-element[state|color="yellow"] {}Copy the code

This is used when mapping to JSX.

:scope {  }
:scope[state|enabled] {  }
.button {  }
.icon {  }
.icon[state|inverse] {  }
Copy the code
<section state:enabled={{isEnabled}}>
  <button class="button">
    <div class="icon" state:inverse={{isInverse}}></div>
    {{value}}
  </button>
</section>
Copy the code

AtomicCSS

This is like a function call, and it has a bit of an alien, cult feel to it on class. In JS it feels normal, however, to be accepted by block-CSS.

<div class="BfcHack M(10px)">
	<a class="Fl(start) Mend(10px)">
		<img >
	</a>
</div>
Copy the code
.Fl\(start\) {
 float: left;
}
.M\(10px\) {
 margin: 10px;
}
Copy the code

ITCSS

Sass nesting is less written with this rule.

Set up the

Configuration items that can be overridden

  • Basic (Reset style)
  • Color (basic tone)
  • Typography (line height, font, size)
  • Animation frame

tool

Utils function

  • Function (defined by @function)
  • Placeholder (reuse of selectors beginning with % in sASS)
  • Mixing macros (mixin, sass = beginning)
  • Media queries

Sass mixed macros

=from($device)
  @media screen and (min-width: $device)
    @content
Copy the code

Sass function

@function powerNumber($number.$exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value
Copy the code

supplier

Vendor. Those of you who know PHP should be familiar with this file. Noder stands for node_modules. That is, third-party tool packages such as reset.css installed through NPM.

object

There is a namespace (O -), short for Object, in which all pages are made up of Object classes, such as containers, layouts, etc.

  • Wrap the O-page so you don’t need to select HTML to manipulate the entire page
  • O-gird grid layout
  • O-container Specifies the external container class of a component. It has a fixed maximum width and can be scaled
  • O-main Main content area, similar to the main tag
  • O-content Text content area, or internal container.

The element

Element, beginning with e-

component

Component, starting with c-

scope

Scope begins with s-

model

Pattern begins with p-, a combination of components, non-reusable structure.

Other namespaces

Is – and JS -, is- table states, js represents javascript bound events.

All that said, which one do you prefer? This CSS framework, which does not involve any CSS writing specifications, is more for actual page development than framework development, and it feels strange to add a C-namespace for all components.