Question

我有以下HTML代码，一开始我通常会有3个代码的项目标识符

getToken() {
    let headers = new Headers();
    headers.append('Accept', 'application/x-www-form-urlencoded');
    headers.append('Content-Type', 'application/x-www-form-urlencoded');


    let options = new RequestOptions({ headers: headers });

    let name = this.UserName,
        psd = this.Password;

    let data = 'grant_type=password&UserName=' + name + '&Password=' + psd

    return new Promise((resolve, reject) => {
        this.http.post('http://localhost:65882/Token', data, { headers: headers })
            .toPromise()
            .then((data: any) => {
                this.results = data; // get data in result variable
                this.token = JSON.stringify(this.results); // then convert data to json string
                console.log(this.token);
                this.allData = JSON.parse(this.token); // parse json data and pass json string
                console.log('token' + this.allData['_body{access_token}']); // got result of particular string
            })
            .catch((error) => {
                console.log(error.status);
                console.log(JSON.stringify(error));
            });
    });
}

尽管'name'元素是title的子元素，但是命名约定必须有多严格？我认为 abc-user-overview__header__title__name 太长，宁愿删除__title，给我：

<span class="abc-user-overview__header__title"> 
    <span class="abc-user-overview__header__title__name">  
        {{ name }}  
    <span class="abc-user-overview__header__active">true</span>
</span>

这是有效且可接受的BEM吗？

Answer 1

Sadly your code is not valid according to BEM convention. This is the official name structure block-name__elem-name_mod-name_mod-val.

Here is your code with valid BEM naming:

<span class="abc-user-overview__title"> 
    <span class="abc-user-overview__name">{{ name }}</span>
    <span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>

Few tips:

Avoid naming your blocks according to their content. Try to be generic for blocks that can be reused. For example, let us have a block that represents a list content. On one of the pages we may display News .news-list, but on other we may display Products, so reusing block with name .news-list with Products inside isnt very nice. In this case a simple class like .list will be enough.
If something can be reused, make it block, not an element.
For boolean modifiers, the value is not included in the name.

Full documentation and great examples can be found in the official website: https://en.bem.info/methodology/naming-convention/#naming-rules

Bem名称过长-最佳做法

1 个答案: