Shulou(Shulou.com)06/01 Report--

This article mainly explains the "vue project in the role of CSS directory code is what", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "what is the role of CSS directory code in the vue project" it!

After working for several years, I found that there are often the following problems in the project:

1. Module split is unreasonable

two。 The naming of variables and functions is unknown.

3. Lack of comments or write a lot of unclear content

4. Repeated code can be found in every corner, etc.

Because of these bad programming habits, the project is more and more difficult to maintain, the program performance is getting lower and lower, which greatly reduces the daily work efficiency and increases the development cost of the company.

Let's take the architecture of CSS in the Vue3 project as a starting point to improve our programming ability and project architecture ability by reducing the redundancy of CSS code and enhancing the maintainability and expansibility of CSS code.

Technical reserve:

Sass

Vue3

Design pattern of CSS

Before learning CSS architecture, let's take a brief look at five common CSS design patterns, all of which provide some development ideas for our CSS architecture.

1.OOCSS mode

OOCSS (Object-Oriented CSS) literally means object-oriented CSS, which has the following specification conventions in development

Reduce dependence on HTML structure

# bad# 1. Low matching efficiency affects css performance # 2. High coupling with html, low maintainability and expansibility. Container-list ul li a {}... # good.container-list. List-item {}.

Increase the reusability of styles

.label {# common code} .label-danger {# specific code} .label-info {# specific code}

2.BEM mode

BEM is an advanced version of OOCSS, is a hierarchical system, it divides our website into three layers, which correspond to the abbreviations block, element and modifier of the three English words BEM, which are divided into block layer, element layer and modifier layer.

To implement BEM into the code, we need to follow three principles:

Separate the block name from the element name with _ _ two underscores

Use-- two dashes to separate element names and their modifiers

All styles are one class and cannot be nested.

Tab1 tab2

However, because two underscores _ _ and two dashes-- which are not so easy in actual development, affect development efficiency, but if you want to strictly control the CSS naming convention, this is undoubtedly a good choice. And when writing CSS, we can encapsulate a BEM.scss file through the mixed instructions of Sass to reduce the input of class names and enhance the CSS structure.

3.SMACSS mode

BEM's simple three-tier method has no problem in dealing with small and medium-sized websites, but it may be more difficult to deal with the style of complex websites, and we need to find a better way.

SMACSS (Scalable and Modular Architecture for CSS) is to write modular, structured, and extensible CSS. It divides the CSS in the project into five categories

Base: the default attribute style is reset, and the famous library is normalize.css

Layout: layout styl

Modules: the style of the reusable module, such as some list presentation

State: state style, such as grayed out or highlighted display of buttons

Theme: skin style, for example, some websites have the function of changing skin.

4.ITCSS mode

ITCSS (Inverted Triangle Cascading Style Sheets), which can be translated as "inverted triangle", divides the styles in our project into seven layers based on the concept of layering.

Settings: project style variables, such as theme colors, fonts, etc.

Tools: tool style, such as defining a function that indicates the occurrence of ellipses in too many words, etc.

Generic: reset and / or standardize styles, box size definitions, etc., corresponding to normalize.css

Base: reset browser element property defaults

Objects: maintain the style of OOCSS

Components: common component styl

Trumps: let the style weight become the highest, utilities and helper classes, can cover anything in front of the triangle, the only important! The place

5.ACSS mode

ACSS (Atomic CSS), translated as "atomized CSS", is a CSS architecture that tends to be small and single-purpose class, and will be named after visual effects. It is a WYSIWYG language with less emphasis on logic and more emphasis on expression. The background of its emergence is that with the advent of the era of front-end componentization, the CSS of each component can be independent of each other and does not affect each other. So there is this kind of code.

Button

At present, the more mature ACSS libraries on the market are: Tailwind CSS and Windi CSS

Advantages of ACSS

CSS files stop growing: using traditional methods, your CSS files get bigger every time you add new features. With utilities, everything is reusable, so you rarely need to write a new CSS, a set of styles that are universal.

No more wasted energy naming, no more stupid class names: for example, sidebar-inner-wrapper is just to be able to set styles and no longer fret about the perfect abstract name of something that is really just a flex container.

Flexible and easy to read: CSS is global, and when you make a change, you never know what you're breaking. The classes in HTML are local, so you can plug and pull the style without worrying about other problems, and many abbreviations of the CSS style are more in line with the brain's memory.

Never worry about naming conflicts, never worry about style overrides.

Shortcomings of ACSS

Will increase the volume of HTML

Breaks the semantics of CSS naming

There is a cost to be familiar with naming ACSS

To sum up, we can see that the disadvantages of ACSS are very small, while the benefits are so great that there is no reason why it should not be applied in the project. Let's build a CSS architecture solution by using BEM, ITCSS, and ACSS patterns.

Project scaffolding creates vue3 projects and installation dependencies

1. Create a vue3 project

two。 Installation: npm I sass@1.26.5 sass-loader@8.0.2-- save

The CSS directory structure shows and explains that src style acss # stores boder, margin, padding and other code based on acss mode base # storage elements (input, p, H2, etc.) reset style settings # stores the uniform standard text color of the project, Variables such as border color theme # store element styles under a specific theme of the project tools # store encapsulated mixin (mixed instruction) and function (function) styles global.scss # CSS index.scss # that requires a global reference to the project # requires a CSS referenced by the Vue file

1. On the difference between mixin (mixed instruction) and function (function)

The function has computational logic, returns the calculated result, and does not output css blocks.

Mixin mainly outputs css blocks according to the calculation results.

/ * mixin * / @ mixin center-translate ($direction: both) {position: absolute; @ if $direction = = both {top: 50%; left: 50%; transform: translate3d (- 50%,-50%, 0);} @ else if $direction = = horizontal {left: 50%; transform: translate3d (- 50%, 0,0);} @ else if $direction = vertical {top: 50%; transform: translate3d (0,-50%, 0) }} / * function * / @ function am ($module, $trait: false) {@ if $trait==false {@ return'[am-' + $module +']';} @ else {@ return'[am-' + $module +'~ = "'+ $trait +']';}}

two。 About style/global.scss and style/index.scss

The imported code in global.scss is used not only in the Vue file, but also in the scss definition file in style

# style/global.scss@import ". / settings/var.scss"; # style/settings/var.scss$background-color-primary: # F1F1F1 politics: $color-white;# style/acss/color.scss@each $style in (primary $background-color-primary, secondary $background-color-secondary) {[bg-# {nth ($style, 1)}] {background-color: # {nth ($style, 2)};}}

Global introduction of style/global.scss

/ / under the root directory: vue.config.jsmodule.exports = {css: {scss: {/ / @ / is an alias for src/ Note: in sass-loader v8, this option name is "prependData" prependData: `@ import "@ / style/global.scss";`},}

The code defined by style/index.scss is just not referenced by other css files in style, all of which are consistent with global.scss.

Introduction of style/index.scss

/ / src/main.jsimport {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import'. / style/index.scss'createApp (App) .use (router) .mount ('# app')

Let's briefly analyze and demonstrate the role of the code in each style directory.

1.acss

The main purpose of this directory is to define some simple border, color, font-size, margin and padding codes

/ * style/acss/border.scss * / @ for $I from 1 through 100 {[radius# {$I}] {border-radius: # {$I} Px; overflow: hidden;}} [circle] {border-radius: 50%;} / * style/acss/font-size.scss * / @ for $I from 12 through 30 {[fz# {$I}] {font-size: # {$I} px;}}

Use acss code

Border-radius: 20px; border-radius: 50%; font-size: 30pxdom2.base

This directory is mainly used to reset the default styles of some elements in the project, such as input, hn, p, a, etc.

/ * style/base/form.scss * / input {padding: 0; outline: none; border: none;} / * style/base/link.scss * / a {color: # ccc; text-decoration: none;} 3.settings

The catalog is a variable that defines the global and uniform specification of the project, such as text color and border color.

/ * style/settings/var.scss * / / * theme hue * / $color-primary: # FF5777;$color-white: # FFFFFF;/* text hue * / $color-text-primary: green;$color-text-secondary: # FF4533;$color-text-tertiary: $color-white;$color-text-quaternary: $color-primary;/* box border hue * / $border-color-base: # E5E5E5Tran * box background color hue * / $background-color-primary: # F1F1F1 $background-color-secondary: $color-white;$background-color-tertiary: $color-primary;/* box default border * / $border-width-base: 1Px! default;$border-style-base: solid! default;$border-base: $border-width-base $border-style-base $border-color-base! default;4.theme

This catalog defines the styles of related modules under each theme of the project

/ * style/theme/default.scss * / [data-theme='default'] .header {background: # FF5777;} [data-theme='default'] .footer {color: # FF5777; border: 2px solid # FF5777;;} / * style/theme/cool.scss * / [data-theme='cool'] .header {background: # 409EFF;} [data-theme='cool'] .footer {color: # 409EFF; border: 2px solid # 409EFX;}

We can achieve the transformation of the project theme by adding the data-theme attribute and value on the html element

Export default {name: "Theme", setup () {const changeTheme = (theme = 'default') = > {window.document.documentElement.setAttribute ("data-theme", theme);} return {changeTheme}} This is an about page title This is an about page content 5.tools

This directory defines some global public mixin and function. At present, this piece of content is relatively perfect, which is SassMagic. If you are interested, you can click in and have a look. Let's take a brief look at the application of the BEM pattern

$elementSeparator:'_ _'; $modifierSeparator:'- -'; / / determine whether `$ selector` contains Modify@function containsModifier in BEM ($selector) {$selector: selectorToString ($selector); @ if str-index ($selector, $modifierSeparator) {@ return true;} @ else {@ return false;}} / / convert `$ selector` to String@function selectorToString ($selector) {$selector: inspect ($selector); / cast to string $selector: str-slice ($selector, 2,-2) / / remove brackets @ return $selector;} / / @ param {String} $selector@function getBlock ($selector) {$selector: selectorToString ($selector); $modifierStart: str-index ($selector, $modifierSeparator)-1; @ return str-slice ($selector, 0, $modifierStart);} @ mixin b ($block) {. # {$block} {@ content;}} @ mixin e ($element) {$selector: &; @ if containsModifier ($selector) {$block: getBlock ($selector) @ at-root {# {$selector} {# {$block + $elementSeparator + $element} {@ content;} @ else {# {$selector + $elementSeparator + $element} {@ content;} @ mixin m ($modifier) {@ at-root {&} # {$modifierSeparator + $modifier} {@ content } / / @ param {string} $block-BEM Block// @ include b (block) {/ / background: red;// @ include e (header) {/ / font-size: 14pxbank / @ include m (css) {/ / font-size: 18pxamp /} / /} / / after compilation / / .block {/ / background: red;//} / / .block _ _ header {/ / font-size: 14px _ header--css /} / / .block _ _ header--css {/ / font-size: 18px / /} Thank you for your reading, the above is the content of "what is the role of CSS directory code in vue project". After the study of this article, I believe you have a deeper understanding of what the role of CSS directory code in vue project is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.