cool hit counter The Evolution of CSS Modularity_Intefrankly

The Evolution of CSS Modularity


| (journalism) lede CSS, the cornerstone of Web technology, has shown great potential from the very beginning. It's very easy to get started, you just need to define the style attributes and values for the elements. However, CSS features are getting richer as the specification is upgraded, and the increased complexity of the front-end business is making the project bigger and bigger. Inside large web applications, CSS organization can be a complex and messy affair, and changing a single line of CSS style on any one element on a page can potentially affect elements on other pages.

Since CSS is not inherently programmatic in nature, many great programming ideas have emerged during its evolution, and this article will take you through the evolution of CSS modularity.

CSS Preprocessor

CSS Preprocessorwhat is it?? generally speaking, They are based on CSS Expanded a set of your own DSL, to solve the problem of writing our CSS Problems that are difficult to solve when:

  • The syntax is not strong enough, e.g. the inability to write in nesting leads to the need to write many duplicate selectors in modular development
  • not have variable and reasonable style reuse mechanisms, Make it so that logically related property values must be repeatedly output as literal quantities, Resulting in difficult maintenance。

Sass, LESS, and Stylus are the most dominant CSS preprocessors available, and they are essentially compilers. Here is an example of Sass, which supports .scss, .sass file types. The syntax supports variables, selector nesting, inheritance (extend), mixing (mixin) and some logical statements, as well as cross-file import capabilities, thus enabling developers to write styles with a good programming mindset.

variable

$red: #f00;

.body {

color: $red;

}

Selector nesting

.hello {

.world {

color: red;

}

}

The generated CSS is.

.hello .world {

color: red;

}

mixin

For preprocessors, mixin is probably one of its most quintessential features, providing the most critical thing missing from CSS: abstraction at the style level.

Sass clearly describes the semantics with two directives, @mixin and @include.

@mixin large-text {

font: {

family: Arial;

size: 20px;

weight: bold;

}

color: #ff0000;

}

.page-title {

@include large-text;

padding: 4px;

margin-top: 10px;

}

post-processor

post-processor It's actually a compiler, If the preprocessor is compiled beforehand, or so post-processor It's compiled after the fact.。 The more typical post-processor have:

  • clean-css: used to compress CSS
  • AutoPrefixer: automatically prefixes CSS3 properties for each browser
  • Rework: a plug-in framework that replaces stylus
  • PostCSS

As an example: complementary prefixes.

.wrap {

display: flex;

}

For this code, AutoPrefixer automatically completes the prefix based on Can I use's browser support data and compiles the code as follows.

.wrap {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

SMACSS Extensible CSS

SMACSS (Scalable and Modular Architecture for CSS) i.e. scalable and modular CSS architecture. Its core idea is to divide the organization of CSS into five categories.

Basic style

Basic style Includes setting the default hyperlink color, The default font style andbody background。 Usually used to define global styles, for example CSS Reset。

body, form {

margin: 0;

padding: 0;

}

a {

color: #039;

}

a:hover {

color: #03F;

}

disposition

Divides the page into blocks of elements in various areas, such as header, sidebar, footer, etc.

module

Reusable units. One thing to note in the module is that selectors always choose class selector to avoid nesting sub-selectors, reduce weight and facilitate external overrides.

statuses

The state class is typically mounted dynamically to the element via js and can override specific properties on the element based on the state.

.tab { background-color: purple;... }

.is-tab-active { background-color: white; }

thematic

Optional visual appearance. There are generally colors, fonts, layouts, etc. depending on the requirements, and the implementation is to pull these styles out separately and set them dynamically based on external conditions (data attributes, media queries, etc.).

BEM

BEM is Block Element Modifier; class name naming rule: Block__Element-Modifier

  • Block Name of the component to which the block belongs
  • Element The name of the element within the component
  • Modifier Element or component modifier

The core idea is componentization. First of all a page can be divided into unmultiple components in sequence by hierarchy, and secondly it is a matter of marking these elements individually. BEM ensures that class names are unique through simple block, element, and modifier constraint rules, while taking class selector semantics to a new level.

CSS IN JS

We all know that in the traditional front-end development hierarchical model, HTML, CSS and JS are separated from each other, thus forming a web development guideline of "separation of concerns".

The idea of CSS IN JS was proposed by Facebook engineer vjeux in a share to solve the problem of using CSS in React. Because of React's component structure, it forces HTML, CSS, and JavaScript to be written together. For example.

const style = {

'color': 'red',

'fontSize': '46px'

};

const clickHandler = () => alert('hello');

ReactDOM.render(

<div style={ style } onclick={ clickHandler }>

Hello, world!

</div>,

document.getElementById('app')

);

This writing style combines structure, style, and behavior in a way that completely contradicts the principle of "separation of concerns". However, this facilitates the isolation of components. Each component contains all the code that needs to be used, no external dependencies, no coupling between components, easy to reuse.

CSS Module

CSS Module does not transform CSS into a programming language, but rather modularizes CSS by adding local scopes and module dependencies to it.

For example, a React component App.js:

import style from './App.scss';

export default class App extends Component {

render() {

return (

<div className={styles.app}>CSS Modules Demo</div>

);

}

}

In the code above, we input the style file App.css to the style object and then reference style.app to represent a class.

.app {

text-size-adjust: none;

font-family: helvetica, arial, sans-serif;

line-height: 200%;

padding: 6px 20px 30px;

}

The build tool will compile the class name style.app into a hash string.

<div>

Hello World

</div>

The corresponding CSS is as follows.

.App__app___3lRY_ {

-webkit-text-size-adjust: none;

-ms-text-size-adjust: none;

text-size-adjust: none;

font-family: helvetica, arial, sans-serif;

line-height: 200%;

padding: 6px 20px 30px;

}

CSS Module dynamically creates a globally unique class name for each locally defined class name, which is then injected into the UI. In terms of development experience, this approach allows developers to not have to be careful about naming class names and just use random compilation to generate unique identifiers.

CSS Module supports multiple build tools, this article uses a webpack build and enables CSS Module by adding the modules parameter after css-loader as follows.

{

test: /.css$/,

loader:

"style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"

},

Note: The default hashing algorithm for css-loader is [hash:base64], which will compile this into a string like ._3zyde4l1yATCOkgn-DBWEL. Here the hash name is modified by localIdentName to the form Appapp_3lRY_.

conclude

CSS of module The evolutionary journey of chemistry continues, It is not yet as JavaScript module emergence ES Modules The ultimate solution for language-level support。 (located) at CSS module In the evolution of chemistry, A lot of good design thinking and practice has emerged, These are worth learning and learning from。

---------------------------------------------------------------

Originally written by Cheng Liufeng, an engineer at Tencent.

Source: Tencent internal KM forum.


Recommended>>
1、Can policymakers find a cure to alleviate the income gap
2、The delegation of the Commission participated in the 5th ChinaRussia Expo with fruitful results
3、Dalian CoCast Technology and NU Pharmacy reach strategic cooperation
4、Some practical tips for managing and maintaining your network from Colin Cheung
5、The barbaric and backward law of the jungle

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号