Test

> This was originally posted on the [Progress Telerik](https://www.telerik.com/blogs/coding-style-guides-standardized-approach-writing-code) blog # Coding Style Guides In the digital landscape, consistency is not just a principle for user interface design but can also be a fundamental requirement in coding practices. Coding style guides represent an essential framework within software development, particularly for frontend developers engaged with design systems. These guides offer a standardized approach to writing code, so a team or organization can maintain uniformity, readability and scalability in its codebase. In this article, we explore the significance of coding style guides, some popular methodologies and how they contribute to a cohesive development environment. ## What Are Coding Style Guides? Coding style guides are comprehensive sets of rules and conventions that dictate how code should be written and organized. They serve as a blueprint for developers, enabling them to write code that not only functions efficiently but is also easy to read and maintain. This consistency is especially crucial in large teams where multiple developers collaborate on the same project, as it prevents discrepancies that can lead to errors or complicated merges in version control systems. Coding style guides can cover various aspects of coding, including but not limited to: - **Naming conventions:** Establishing rules for naming variables, functions, classes and other code elements, promoting clarity and consistency. - **Code formatting:** Defining standards for indentation, whitespace usage, line breaks and other formatting rules to enhance readability. - **Code organization:** Providing guidelines for structuring code files, directories and modules, improving maintainability and scalability. - **Commenting practices:** Establishing conventions for writing clear and concise code comments, facilitating collaboration and knowledge sharing. - **Language-specific conventions:** Addressing language-specific coding practices, such as bracket styles, variable declarations and control flow structures. ## Why Are Coding Style Guides Important? For design engineers, coding style guides are more than just rules; they can be a pivotal tool for translating design systems into functional code. A well-defined style guide ensures that the implementation of [design tokens](https://www.designengineer.xyz/posts/design-tokensfundamental-building-blocks-of-design-systems) and systems is consistent across various parts of an application, which is crucial for maintaining the integrity of the design throughout the development process. In addition to streamlining collaboration among team members, a coding style guide ensures that all developers follow the same design principles, which is crucial when implementing UI components. Consistency in code leads to consistency in user interfaces, making the application more intuitive and user-friendly. When every part of an application adheres to the same design guidelines, it creates a more seamless experience for users, reducing the learning curve and increasing user satisfaction. ## Popular Coding Style Guides While coding style guides can be tailored to the specific needs of an organization, there are several popular methodologies that have gained widespread adoption in the software development community. To illustrate how coding style guides can be applied and used, we’ll discuss a few below: ### BEM As an example, one popular coding style guide that many use when structuring CSS classes is the [BEM methodology](https://getbem.com/introduction/). BEM stands for Block, Element, Modifier and it’s a naming convention that helps developers create modular and reusable CSS classes. Consider a scenario where CSS classes are named spontaneously without a clear system: ```css /* CSS without clear structure */ .card {} .featured {} .title {} .description {} .link {} ``` In the above simple example, the class names are generic and could easily overlap in style properties across different sections of a website. This can lead to styles being accidentally overridden and makes the CSS difficult to maintain, especially in larger projects. Now, let's contrast this with BEM methodology. Using BEM, class names are structured like the following: ```css .block {} .block__element {} .block--modifier {} ``` The **block** is the main component or container, the **element** is a part of the block and the **modifier** is a variation of the block or element. Each of these serves a clear purpose and reduces the risk of style conflicts. Contrasting with the poorly structured example, BEM offers a clear and systematic way to name CSS classes, which helps in avoiding conflicts and enhances modularity: ```css /* BEM structure for the card component */ .card {} .card__title {} .card__description {} .card__link {} .card--featured {} ``` Here, each class has a specific purpose: - **Block:** `.card` acts as the foundational class for the card component. - **Element:** `.card__title`, `.card__description` and `.card__link` are elements that belong to the `.card` block, indicating their specific roles within the card component. - **Modifier:** `.card--featured` is a modifier that represents a different version of the `.card`, specifically styling it as a featured card. To show how these BEM classes are applied in HTML, consider the following example: ```html

Featured Product

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn More

``` This structure clearly separates the styling concerns, making the CSS easier to manage and extend. For more details on BEM, be sure to check out the [official BEM documentation](https://getbem.com/). ### Google HTML/CSS Style Guide Coding style guides encompass more than just CSS organization; as mentioned earlier, they can also cover aspects like naming conventions, indentation, formatting, and commenting. For example, [Google’s HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) provides comprehensive guidelines on formatting and style rules for HTML and CSS. It covers best practices for accessibility, like having [alternative content always be provided for multimedia](https://google.github.io/styleguide/htmlcssguide.html#Multimedia_Fallback): ```html

``` [Using valid HTML](https://google.github.io/styleguide/htmlcssguide.html#HTML_Validity): ```html Test

This is only a test. Test

This is only a test.

``` And [writing semantic HTML](https://google.github.io/styleguide/htmlcssguide.html#Semantics) where possible: ```html

All recommendations

All recommendations ``` For a more detailed list of guidelines, be sure to check out the [Google HTML/CSS Style Guide documentation](https://google.github.io/styleguide/htmlcssguide.html). ### Airbnb JavaScript Style Guide The [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) is another widely recognized coding standard that emphasizes clarity, predictability and organization in JavaScript coding practices. It advocates for modern JavaScript syntax and idiomatic expressions, promoting best practices that lead to clean and understandable code. This style guide is particularly meticulous about variable and function naming, the use of arrow functions and structuring components in React applications. For example, it prefers constants over `let` and `var` for variables that do not change and provides certain guidelines when using components and props in React. Here’s how the Airbnb JavaScript Style Guide would suggest structuring this piece of JavaScript code: ```js // Bad function handleThing() { return true; } // Good const handleThing = () => true; ``` In React, as an example, the guide encourages the use of [PascalCase for React component names and camelCase for instances of these components](https://github.com/airbnb/javascript/tree/master/react#naming): ```jsx // bad import reservationCard from "./ReservationCard"; // good import ReservationCard from "./ReservationCard"; // bad const ReservationItem = ; // good const reservationItem = ; ``` For a list of coding style guides for different programming languages, check out the GitHub repository [awesome-guidelines](https://github.com/Kristories/awesome-guidelines) by GitHub user [Kristories](https://github.com/Kristories). ### Tailwind When developing your own design system, your team can either create these guidelines from the ground up or adopt widely recognized frameworks and conventions from the broader development community. One such popular framework is [Tailwind](https://tailwindcss.com/), a utility-first CSS framework that has become a favorite in the development scene. Unlike traditional approaches like BEM, which focus on structured naming conventions, Tailwind provides a set of utility classes that can be applied directly to HTML elements to style them efficiently. ```html

font-mono

The quick brown fox jumps over the lazy dog.

``` Tailwind’s design philosophy aims to offer a flexible and customizable method for designing interfaces. Its utility-first approach reduces the amount of CSS developers need to write, fostering a more consistent and scalable design. Each class in Tailwind specifies a particular style or a set of CSS properties, for example: - [p-3](https://tailwindcss.com/docs/padding) denotes `padding: 0.75rem` - [bg-white](https://tailwindcss.com/docs/background-color) denotes `background-color: white` - [rounded-lg](https://tailwindcss.com/docs/border-radius) denotes `border-radius: 0.25rem` - And so forth ## Wrap-up In conclusion, coding style guides are essential tools in the realm of software development, especially for design engineers who bridge visual design and technical implementation. These guides provide a structured approach to coding that enhances collaboration, promotes consistency and elevates the quality of the final product. Whether adopting established standards like Google’s HTML/CSS guidelines, BEM for CSS structuring or the Airbnb JavaScript Style Guide, or creating customized guidelines tailored to the specific needs of a project, the benefits are significant. For design engineers looking to enhance their team’s efficiency and output quality, integrating a comprehensive coding style guide can be important in achieving these goals.

Coding Style Guides

Coding Style Guides

My Journey Empowering Users with Human-Centric Design

What Web Developers and Designers Need to Know About the AI Act

Design Tokens—Fundamental Building Blocks of Design Systems

Using Clerk with Liveblocks (without AI’s help…)

Am I the Pragmatist or the Optimist?

Become a Design Engineer

The Design Engineer