Writing High-Quality Maintainable Code: Elegant Naming

Writing maintainable front‑end code starts with good naming. The article begins by noting that a clear name can make a requirement feel half‑completed and introduces several bad naming examples such as meaningless generic names, cryptic abbreviations, numeric suffixes, and inappropriate use of leading or trailing underscores.

// bad
const data;
const info;
const tool;

// bad
const comp;
const crt_date;
// good
const components;
const company;
const current_date;

// bad
const button1;
const button2;
const info1;
// good
const importButton;
const userInfo;

// bad
const _firstName_ = 'Zcy';
const firstName_ = 'Zcy';
const _firstName = 'Zcy';
// good
const firstName = 'Zcy';

To improve naming, the article recommends three principles: be straightforward and meaningful, follow industry conventions, and respect team‑wide constraints. Meaningful names should directly convey purpose, e.g., getUserInfo instead of getInfo , and formatNewsList instead of formatList .

Conventions include using id for identifiers, prefixing booleans with is (e.g., isVisible ), and using withXxx , hasXxx , or enableXxx for configuration flags. Method names should combine verbs and nouns, such as fetchSearchList or deleteUser . Class names follow PascalCase.

Team enforcement can be achieved with ESLint rules like id-match or camelcase . Example ESLint configuration:

module.exports = {
  "rules": {
    "id-match": ["error", "^[a-z]+([A-Z][a-z]+)*$"],
    "camelcase": ["error", {"properties": "always"}]
  }
}

For project and file naming, the article suggests kebab‑case (e.g., news-index ) or camelCase (e.g., newsIndex ). JavaScript variables should use lowerCamelCase, constants use UPPER_SNAKE_CASE, and functions use lowerCamelCase with descriptive verbs.

In CSS, the BEM methodology ( Block__Element--Modifier ) is recommended to avoid naming collisions and improve readability. Example markup and SCSS:

<div class="head">
  <div class="head__title">标题</div>
  <div class="head__title--disabled">置灰内容</div>
</div>

.head {
  background-color: #fff;
  &__title {
    font-size: 14px;
    color: #666;
    &--disabled { color: #f00; }
  }
}

For naming assistance, the article recommends the Codelf tool, which searches GitHub, GitLab, and other repositories for naming patterns across multiple languages.

In conclusion, adhering to clear, consistent naming rules and leveraging tooling makes code easier to read, maintain, and collaborate on. The article ends with references to further reading on naming practices.