# 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)
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.
Polymer event handlers like on-tap 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: ``
All <custom-elements> and some HTML elements like <iframe> require closing.
* Use the `button` element instead of ``. * Do not use `
`; place blocking elements (`
`) as appropriate. * Do not use spacing-only divs; set the margins on the surrounding elements. * Only use `` elements when displaying tabular data. * Do not use the `for` attribute of `