frontend.md

Do not use ID attributes in CSS

• Use .class instead
• ID used to identify element
• ID can use only once per page
• If we use ID to style element - we write styles for one element, but better if we use selector by class .class to write more flexible styles

😡	😄
<button id="add-user-btn">Add</button>	<button class="js-add-user-btn">Add</button>
<div id="users-list">...</div>	<div class="js-users-list">...</div>

Do not use .js- classes in CSS

• It for JS-hanlders

😡	😄
.js-add-user-btn { color: #fff; }	$('.js-add-user-btn').on(...)

Do not use other CSS .class selectors in JS

• Use with prefix .js- instead
• Use $('.js-element') to find element
• If we use selectors by class .class to find elements and attach JS handlers and then want to change class name - those change will trigger CSS, but better if CSS and JS are work separatly
• If you attach hanlders to some specific CSS Framework-classes like .row or .col and soon we want change CSS Framework - JS code is hard-binded to current CSS Framework. Better if we use .js- - we can remove or rename other CSS .class selectors and do not worry about JS

😡	😄
$('.container-wrapper .button').on(...)	$('.js-container-wrapper .js-item-button').on(...)

Do not use inline JS

• Do not use onclick="..." and same attributes
• Do not use <script> tag with content
• Use JS in files instead
• If we use inline JS - it is more difficult to find place where error was triggered
• Use CSS class .hide instead display: none and jQuery .addClass('hide') and .removeClass('hide')

😡	😄
<button onclick="addUser()">Add</button>	$('.js-add-user-btn').on('click', ...)

Do not use finding element by tag name

• Use class .js-element-name for find element in JS
• Use class .element-name for find element in CSS
• Avoid to use class indention when you try to find element (ex. $('.js-container .js-item')), use $container.find('.js-item') instead

😡	😄
$container.find('button.myclass')	$container.find('.js-myclass-button')
button.myclass { ... }	.myclass-button { ... }

Do not use inline CSS

• Do not use style="..." attribute
• Do not use <style> tag with content
• Use CSS in files instead
• If we use inline CSS - it have max proprity and we should use !important to redefine styles
• If we use <style> tag with content - it is more difficult to find place where styles is setted

Naming convention

For both variables/methods:

• is, has - that boolean
• suffix El - that contain/return DOM element (getUserNameEl(), var userNameEl)
• suffix Html - that containe/return HTML text (NOT DOM) (getMessageHtml(), var messageHtml)
• plural or suffix List - that contain/return array (getUsers() or var users, getUsersList() or var usersList)

😡	😄
var open = false	var isOpen = false
this.locked = false	this.isLocked = false
userName()	getUserNameEl()
var userName	var userNameEl

Variables:

• Use camel case notation (var userBtn, var listEl)
• Should mostly contain a noun (var button)
• If it contain boolean - it should start with is or has and contain adjective to indicate state (var isButtonShowed, var isPopupOpened)
• If variable contain jQuery element - it should start with $ (var $usersList = $('.js-users-list'))
• If variable contain just DOM element (without jQuery wrapper) - it should have siffix El (var usersListEl = document.querySelector('.js-users-list'))

😡	😄
var full_data	var fullData

Methods:

• Use camel case notation (sayHelloMethod())
• get - method for getting data
• set - method for setting data (nothing return or this)
• Should start with verb and contain noun (getUsers(), getName(), findElement(), openPopup(), closeDropdown())

😡	😄
handlerRunReportSubmit()	handleRunReportSubmit()
_DialogOnComplete()	handleDialogOnComplere()
_handlerSubmit()	handleSubmit()

CSS classes:

• Use hyphen notation (.my-name-btn)
• .js- - for JavaScript use only (find element or add handler)
• Use -wrapper, -container, -holder, -btn, -list, -item, -arrow, -nav or simmilar suffix to emphasize element mission
• Use prefix of CSS file as namespace for classes. For example file _table.scss so classes will be .table-

😡	😄
.contentWrapper	.content-wrapper
button	.add-btn
.listings	.listings-list
.listings .item	.listings-list .listings-item

Files

Naming

• Use hyphen notation (my-script.js, my-style.scss)

Placing

Move all JS files that have window.BL. scope and have global importance (used on several pages) to www/js/bl/ directory and rename it to hyphen notation style (ex. www/js/BL.Look-Up-Listing.js > www/js/bl/look-up-listing.js).

For naming CSS classes we can use https://en.bem.info/method/ (just metodology) or just naming convention https://en.bem.info/method/naming-convention/

Now I want to use next convention for CSS naming.

.<MODULE>-<ELEMENT>

Where:
<MODULE> - is CSS file name and module name.
<ELEMENT> - is a different element of this module.

For JS:

.js-<MODULE>-<ELEMENT>

Where:
<MODULE> - is JS file name and module name.
<ELEMENT> - is a different element of this module.

Example:
CSS file name: popup.css
JS file name: popup.js
HTML structure:

<div class="popup js-popup">
  <div class="popup-content js-popup-content">...</div>
  <button class="popup-close-button js-popup-close-button">&times;</button>
</div>

CSS selectors used in JS:

.js-popup
.js-popup-content
.js-popup-close-button

Example: submodules:
Main module file JS file: lsrc.js
Main module CSS file: lsrc.css
Submodule JS file: lsrc-popup.js
Submodule CSS file: lsrc-popup.css
CSS selectors used in submodules:
For styling:

.lsrc-popup-content

For JS:

.js-lsrc-popup-content

Move all JS files that have window.BL. scope and have global importance (used on several pages) to www/js/bl/ directory and rename it to dash-style (ex. www/js/BL.Look-Up-Listing.js > www/js/bl/look-up-listing.js).