# Chromium Web Development Style Guide [TOC] ## Where does this style guide apply? This style guide targets Chromium frontend features implemented with JavaScript, CSS, and HTML. Developers of these features should adhere to the following rules where possible, just like those using C++ conform to the [Chromium C++ styleguide](../c++/c++.md). This guide follows and builds on: * [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) * [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) * [Google Polymer Style Guide](http://go/polymer-style) *** aside Note: Concerns for browser compatibility are usually not relevant for Chromium-only code. *** ## Separation of presentation and content When designing a feature with web technologies, separate the: * **content** you are presenting to the user (**HTML**) * **styling** of the data (**CSS**) * **logic** that controls the dynamic behavior of the content and presentation (**JS**) This highlights the concern of each part of the code and promotes looser coupling (which makes refactor easier down the road). Another way to envision this principle is using the MVC pattern: | MVC Component | Web Component | |:-------------:|:-------------:| | Model | HTML | | View | CSS | | Controller | JS | It's also often appropriate to separate each implementation into separate files. DO: ```html LAUNCH BUTTON WARNING … ``` * Specify ``. * Set the `dir` attribute of the html element to the localized ‘textdirection’ value. This flips the page visually for RTL languages and allows `html[dir=rtl]` selectors to work. * Specify the charset, UTF-8. * Link in image, icon and stylesheet resources. * Do not style elements with `style="..."` attributes. * Include the appropriate JS scripts. * Do not add JS to element event handlers. *** aside Note: Polymer event handlers like `on-click` are allowed and often reduce the amount of addressing (adding an ID just to wire up event handling). *** ### Body ```html

$i18n{autofillAddresses}

$i18n{learnMore} ``` * Element IDs use `dash-form` * Exception: `camelCase` is allowed in Polymer code for easier `this.$.idName` access. * Localize all strings using $i18n{} * Use camelCase for $i18n{} keys names. * Add 2 space indentation in each new block. * Adhere to the 80-column limit. * Indent 4 spaces when wrapping a previous line. * Use double-quotes instead of single-quotes for all attributes. * Don't close single tags * DO: `` * DON'T: `` *** aside Note: All `` and some HTML elements like `