A front-end architecture is a collection of tools and processes designed to improve the quality of front-end code and enable efficient and sustainable workflows. Today I’m going to share how CSS is modularized in the front end.

The way HTML was handled in the past

In the past, HTML has generally been divided into two camps: procedural and static.

Programmatic HTML: 100% automation, control degree is close to 0

This is usually appropriate because the functional development of the project (including HTML output) has been going on for weeks or even months before the front-end team gets involved in the project (for example, with JSPS, the page is also being output from the back end). The situation is even worse if the markup source code is scrambled by a complex rendering process and comes from different templates.

This means that updating HTML can be extremely difficult for anyone who is not a back-end complexity. Often by this point, the back-end developer has already moved on to other tasks, without events coming back to make any major changes.

The effect of this constraint is that editors and back-end developers prefer to write a bunch of tags and CSS class names in order to embed content better in HTML. Eventually, they might write code like this:

<div id="header" class="clearfix">
    <div id="header-screen" class="clearfix">
        <div id="header-inner" class="container-122 clearfix">
            <div id="nav-header" role="navigation">
                <div class="region region-navigation">
                    <div class="block block-system block-menu">
                        <div class="block-inner">
                            <ul class="menu">
                                <li class="first leaf">
                                    <a href="/start">Get Started</a>
Copy the code

This code shows a simple top of the page that can contain 10 levels of nesting even before filling in the content, which is a terrible phenomenon in real development, and experience shows that it can nest much more.

In the past, this “div stew” might have helped us turn static Photoshop images into HTML pages, but as our needs matured, we needed better ways to harness them.

Static marking: the degree of automation is close to zero, and the degree of control is 100%

If your project is small, or if the task is just developing a page that needs to fill a large topic area, it’s easier to write static HTMl. Although this situation is very flexible, it also means that we have to be responsible for maintaining all the code. When requirements change, we need to manually modify each page individually, so our code will look like this:

<header>
    <section>
        <nav>
            <div>
                <ul>
                    <li>
                        <a href="products">Products</a>
                        <ul>
                            <li>
                                <a href="/socjs">Socks</a>
Copy the code

To keep things simple, semantically is preferred, applying styles based on HTML5 element names and their hierarchical relationships, not CSS class names. There is no CSS class name in our HTML, the main navigation style is automatically inherited from the secondary navigation anchorage button, and we often end up adding descendant options:

header > section > nav > div > ul > li > a {
    color: white;
}
header > section > nav > div > ul > li > ul > li > a{
    color: blue;
}
Copy the code

In the past, this statically marked approach meant that the code had to be at least that long for any hovering or active state selector. You don’t even want to see what level 3 navigation will look like, let alone level 4 or even level 5 navigation…

Balance controllability and automation

The ideal we all aspire to is that every line of HTML on a website is automatically generated by a program, and as front-end developers, we just need to manage the template and process used to generate the HTML. Unfortunately, this is not the case with displays, which, at best, require the user to generate content that does not automatically add CSS class names. We can only use templates to determine HTML such as tables, forms, and navigation bars, which gives us some flexibility and necessary automation.

The difference between statically and statically is that after the program is executed, CSS class names can be added to the HTML through a class name system, and the visual appearance is not determined by element labels and hierarchies.

<nav class="nav">
    <ul class="nav__container">
        <li class="nav__item">
            <a class="nav__link" href="/products">
                <ul class="nav__container--secondary">
                    <li class="nav__item--secondary">
                        <a class="nav__link--secondary" href="/socks">
Copy the code

This seems rather verbose, and there’s no excuse for it, but we’ve added a CSS class name to each element to make it cleaner, more modular, and reusable. We can use it as a generic template.

CSS modular

To define HTML using this modular approach, we need to change the way we build pages. Separate static web pages don’t exist at all. Web pages are a thing of the past.

Nowadays, CSS theories are almost as varied as CSS or JS frameworks, but they are cumbersome to use and must be used in sets, whereas CSS theories are more about the relationship between HTML and CSS than precompiled code bases, so they are more flexible to use.

Of course, no methodology is perfect, and you may find that one project is a good fit for one approach, but another project is a better fit for another approach. You can always create your own methodology, or adapt existing theories to suit your own needs, so when you’re in doubt about which methodology to use, look at some familiar methodologies and then analyze them based on the project you’re working on.

OOCSS method

  • Separate structure and appearance

    Define visual features as reusable units, such as Simpleclass for using right angles, and Complex for rounded corners and even shadows.

  • Separate containers and contents

    No longer use element position as a style qualifier. Instead of tagging CSS class names inside containers, we now use reusable CSS class names, such as toggle-title, that apply to the corresponding text processing, regardless of the text element. In this way, if no other CSS class name is applied, you can render the tag in the default style.

SMACSS method

Scalable and Modular Architecyure for CSS

  • basis

    What the markup will look like if you don’t add a CSS class name.

  • layout

    Divide the page into sections.

  • The module

    Modular, reusable units in design.

  • state

    Describes how a module or layout should be displayed in a particular state or situation.

  • The theme

    An optional visual appearance layer that allows you to change themes.

BEM method

Block Element Modifier, Block Element Modifier

BEM brings us to the third approach, which is another aspect of SMACSS. BEM is just a naming convention for CSS class names. It doesn’t cover how to write the structure of your CSS, it just suggests adding a CSS class name to each element with the following content.

  • Piece of

    Name of the component to which it belongs.

  • The element

    The name of the element inside the block.

  • Modifier Any modifier associated with a block or element.

BEN uses a very concise convention to create CSS class names, and these strings can be quite long. Element names are appended after double sliders (for example, toggle__details), and modifiers are appended after double dashes (for example, toggle__details — active). Here details is the element and active is the modifier, and this convention makes the CSS class name very clear. The use of double yokoses prevents block names from being confused as modifiers. The advantage of using this method in OOCSS or SMACSS is that each CSS class name describes in detail what it does. There are no CSS class names in the code such as open or IS-Active that can only be understood in a specific context. If we look at the names “Open” and “IS-Active” separately, we don’t know what they mean. The BEM method may seem cumbersome and redundant, but when we look at the CSS class name of Toggle__Details –active, we know that it means: The name of the element is Details, the location is in the toggle component, and the state is active.

Choose the right solution

Of course, the most important thing in our project is to find a suitable solution. Don’t choose a specification just because it’s popular or another team is using it. All three methods provide similar tools and are used in systems in similar ways.

Welcome to my public account — Sixiang said:

Read the original