Официальные гиды стиля для HTML, CSS и Javascript

Согласно Wikipedia, стиль программирования:

Стиль программирования (также названный стандарты кода или соглашения кода) - термин, который описывает соглашения, чтобы писать исходный код на неких языках программирования.

Стиль программирования часто зависимый от языка программирования, который был выбран, чтобы писать. Например стиль языка программирования C изменит относительно языка программирования языка БЕЙСИК.

В нескольких языках существуют гиды стиля, которых мы могли бы называть "чиновниками" как в случае PHP и Пайтона, хотя это рекомендация, не обязательный стандарт:

В HTML, CSS и JS использовал путеводители стиля Google:

HTML/CSS Стиле Гиде

Язык сценариев JavaScript Стиле Гиде

Мой вопрос:

Существуют другие более признанные или "официальные" путеводители стиля для HTML, CSS и JS?

66
задан 29.06.2017, 22:33
6 ответов

Намерение путеводителей состоит в том, чтобы помогать бороться с Законом тривиальности, также знакомая в программировании как эффект будки велосипедов.

Каких-то из этих потребовали, если ты пробуешь способствовать какой-то формы в каких-то хранилищах и публичных книжных магазинах (ej карма). Все это помогает в тот, что код был легким для того, чтобы быть поддержанным, хотя он будет написан многообразными разработчиками (даже, хотя у них не будет контакта между собой).

Весь код любого шрифта был бы должен казаться сочинением из-за единственного человека, не имея значение все те contibuido

Другая из причин вышеупомянутых путеводителей состоит в том, чтобы помогать дразнить с какие-то из необычноcтей языков.

Многие из них имеют такие сходства как использование var в начале функций, чтобы предотвращать hoisting и не использовать eval.

Я буду упоминать о самых заметных для языка сценариев JavaScript.

Гид Крокфорда

Восток - очень известный персонаж мира браузеров, между другими вещами из-за того, что изобрел JSON и написал книгу "язык сценариев JavaScript, the good parts". Самые заметные правила

Использование тройного оператора в различных линиях

condicion1 && condicion2
    ? expresión
    : expresión

Использование выражения возврата в той же линии, чтобы предотвращать вставление автоматической точки с запятой.

// Recomendado
return expresion;

return {
    propiedad: 'valor'
};

// No recomendado
// Se convierte en return; lo que resulta en undefined
return
{
     propiedad: 'valor'
}

Гид jQuery

Использование квадратных скобок в блоках

if/else/for/while/try 

Всегда они используют квадратные скобки {} и всегда они идут в многообразных линиях

if (true) 
    alert();

он преобразовывается в

if (true) {
    alert();
}

Операторы unarios

Операторы unarios (ej.!, ++) у них не должно быть место относительно Вашего оператора

// No recomendado

a ++;

(! a)

Гид npm

Они не используют точки с запятой ; за исключением единичных случаев

Циклы for(;;). Их потребует язык.

Недействительные циклы while (condición); (Очевидно не рекомендуемый).

Инструкция case в той же линии, что и break case 'valor': hazAlgo(); break

Напротив скобки ( или крючок [ в начало линии. Это избегает того, чтобы выражение было интерпретировано как призыв к функции или доступу к свойству соответственно.

Пример

;(x || y).doSomething()
;[a, b, c].forEach(doSomething)
for (var i = 0; i < 10; i ++) {
  switch (state) {
    case 'begin': start(); continue
    case 'end': finish(); break
    default: throw new Error('unknown state')
  }
  end()
}

Поешьте сначала

Раздели длинное выражение на Ваши запятые и помести запятые сначала

var magicWords = [ 'abracadabra'
                 , 'gesundheit'
                 , 'ventrilo'
                 ]
  , spells = { 'fireball' : function () { setOnFire() }
             , 'water' : function () { putOut() }
             }
  , a = 1
  , b = 'abc'
  , etc
  , somethingElse

Ведет язык сценариев JavaScript Стандарт

Используй единственный var из-за линии

// Recomendado
var a;
var b;
// No recomendado
var a, b;

Всегда используй window

 // No recomendado
alert();
// Recomendado
window.alert();

Гид стиля node

Используй return, чтобы уменьшать код

// Recomendado
function isPercentage(val) {
  if (val < 0) {
    return false;
  }

  if (val > 100) {
    return false;
  }

  return true;
}

// No recomendado
function isPercentage(val) {
  if (val >= 0) {
    if (val < 100) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

Не верь в функции внутри функций, чтобы предотвращать вложение если только он не будет строго необходим

// Recomendado
setTimeout(function() {
  client.connect(afterConnect);
}, 1000);

function afterConnect() {
  console.log('winning');
}

//No recomendado
setTimeout(function() {
  client.connect(function() {
    console.log('losing');
  });
}, 1000);

Гид airbnb

Эта приходит с добавочными деталями для языков и frameworks как SASS, ES6 и React

Используй destructuración, чтобы соглашаться на свойства объектов, когда ты хочешь распределить их в переменные.

// No recomendado
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// Recomendado
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// La mejor variante posible
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

Всегда используй классы вместо того, чтобы манипулировать прототипом прямо

// No recomendado
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};


// Recomendado
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

Idiomatic

Инструкции const и let они были бы должны появляться в начало Вашего блока

// No recomendado
function foo() {
  let foo,
    bar;
  if ( condition ) {
    bar = "";
    // statements
  }
}
// Recomendado
function foo() {
  let foo;
  if ( condition ) {
    let bar = "";
    // statements
  }
}

Используй truthy, чтобы подтверждать размеры договоренностей и цепи символов

// No recomendado
if ( array.length > 0 ) 
if ( array.length === 0 )
if ( string !== "" ) 
if ( string === "" )

// Recomendado
if ( array.length ) 
if ( !array.length )
if ( string ) 
if ( !string ) 

Я уверен, что есть больше, и со временем они могут продолжать появляться. Каждый framework язык сценариев JavaScript может создавать Ваш стиль также а следовательно ты можешь заканчивать с комбинированными стилями.

Для CSS ты можешь консультироваться

https://css-tricks.com / css-style-guides /

http://codeguide.co/#css

https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS

http://primercss.io/guidelines/

https://make.wordpress.org / core / handbook / best-practices / coding-standards / css /

Помни также, что ты можешь выбирать, не работать с CSS, а с каким-то языком предпроцессор как Sass, у Less и Compass, которые могут в свою очередь, могут быть путеводители стиля.

Заключая, есть ли у тебя в рассуждении большое количество вариантов, которые существуют решение дело в том, что ты решил твой собственный стиль. Выбирает один из путеводителей и продолжи ее, если тебе кажется, что он не приспосабливается к тому, что ты хочешь, изменись другой или сделай ему маленькие изменения в твой вкус. Важное состоит в том, чтобы ты и другие, которые писали бы код, с тобой они согласились со стандартом, и этот был видимым в новых разработчиков.

Я оставляю тебе встречу путеводителя node

Гид для estilar твой код язык сценариев JavaScript / node.js. Разветвись и точно подойди в твой вкус.

55
ответ дан 24.11.2019, 13:30
  • 1
    @devconcept dif и # 237; cil понимать в модераторы или администраторы вопрос относится друг к другу о мнениях и подсказках и принят однако другие вопросы, которые он основывает в то же самое, есть отрицает или хуже в и # 250; n они упоминают о том, что ты надеешься, что он пишет c и # 243; я говорю из-за тебя, что эти это разочаровывающе, нужно давать recompenza, как кажется, для того, чтобы вопрос, который не основывается, политике или использованию сайта. М и # 225; s одного я упоминаю о том, что сайт - это, чтобы помогать в ошибках, которые появлялись бы. – Otto 15.09.2016, 16:36
  • 2
    @J.Doe у Тебя Есть raz и # 243; n, с которым вопрос может быть основанным по мнениям, но - тема, которая интересует многие. Мой ответ не ограничивается тем, чтобы упомянуть gu и # 237; схвати, а чтобы относиться к нижележащей проблеме. soluci и # 243; n в закон тривиальности он состоит в том, чтобы разрешать discusi и # 243; n (много капитанов команды это понимают). Если ты не можешь убеждаться в твоей точке зрения, используй est и # 225; ndar распознанный. raz и # 243; n из-за той, которая упомянула о различных gu и # 237; эксперт, - потому что, чтобы уплачивать в какие-то хранилища Опен Соурсе типов дебета знать существования их иначе pull-request быть и # 225; n отрицаемые, хотя c и # 243; я говорю est и # 233; хорошо. – devconcept 15.09.2016, 16:47
  • 3
    @devconcept я понимаю равно не против, но если закон применяется для одного так как, который был бы для всех, это м и # 225; s я участвую в рыцарском турнире. Пример мой вопрос в отрицаемый три раза и закрывшая так, что два может не ждать d и # 237; схвати, чтобы инициализировать recompenza. Добавочное то мой вопрос может представлять интерес система tags, которая функционирует правильно многие, нравилась бы им иметь систему tag это тема одинокого интереса к тому, чтобы хотеть улучшить систему не принята. – Otto 15.09.2016, 16:55

он сказал бы тебе, чтобы ты использовал путеводители этой страницы (хотя они на английском) http://www.w3schools.com для HTML и CSS, я обычно использую их, когда у меня есть какое-то сомнение или нет, я вспоминаю о каком-то свойстве и они идут гениально. Для Javascript я обычно использую https://developer.mozilla.org / состоит / docs / Веб / язык сценариев JavaScript в том, что, хотя он браузера, я нахожу достаточно completita. Так или иначе, w3schools также он помогает тебе для Javascript, у него есть раздел для этого (и для других cosillas также). У той mozilla также есть секция для HTML и CSS, разделенного на 3 уровня, это была бы ссылка: https://developer.mozilla.org / это / docs / Веб / руководители и ты выбираешь уровень (хотя я обычно не смотрю эту для HTML и CSS, я предпочитаю w3school).

Просвет, что после, он зависит от frameworks и т.д., которые ты использовал, может быть, какие-то вещи путеводителей не подали тебя многого, но в этих случаях он состоял бы в том, чтобы искать путеводитель этого framework в вопросе.

Потом, если эти страницы не подают или нет мне я много целое число, которого они говорят, я обычно ищу из-за форумов или из-за объяснительных веб-страниц, как он может быть http://www.aulaclic.es/index.htm или http://librosweb.es/. Последняя обычно переводит официальные путеводители других вещей как Bootstrap 3 (framework) на испанский язык.

10
ответ дан 24.11.2019, 13:30

Один из путеводителей стиля для языка сценариев JavaScript, который больше и наиболее принятый у него есть, - путеводитель команды разработки Airbnb. Будь очень довольно документированной и состой из многочисленных примеров. В этом repo также ты найдешь путеводитель для CSS-in-JavaScript и другой для CSS и Sass, которые очень хорошо.

10
ответ дан 24.11.2019, 13:30

С быстрыми поисками через твою поисковую службу доверия ты можешь находить очертания для HTML, CSS и языка сценариев JavaScript как например:

Для особенного случая языка сценариев JavaScript он рекомендует тебе проверять стандарт ECMAScript, который дает спецификацию, свойственную языку, и использовать инструмент JSLint для правильного кодирования.

9
ответ дан 24.11.2019, 13:30
  • 1
    w3Schools он популярный, но не является официальным. Segú n я понимаю ECMAScript включи guí эксперт стиля, так как говорится о especificació n языка, поскольку ты упоминаешь об этом. Как таковой JSLint - инструмент, но detrá s этой deberí когда что-то, что он обосновывал бы как опера, это podrí чтобы быть guí в стиля. – Rubén 29.06.2017, 22:04

Гид стиля для HTML, CSS и Javascript.

Так как нет ничего лучшего, чем официальные источники:

  • Официальный источник HTML w3.
  • Официальный источник CSS w3.
  • Полный путеводитель, основанный в официальную страницу w3 со многими примерами html, css, javascript и jQuery он w3schools все примеры - простые оригиналы без nigun тип дополнений или plugin.
  • Официальный источник javascript конечно - тот наследство jQuery в Вашей документации находятся много примеров https://jquery.com / даже как создавать твой собственный plugin

Существуют другие добавочные сайты с очень хорошими стилями и он одну ведет завершает шаг за шагом:

Для меня лучший путеводитель завершает в стилях так для html, css, и javascript он w3schools в w3schools существуют много простых передовых и очень практических примеров.

9
ответ дан 24.11.2019, 13:30

Существует организм, ответственный обновлять и создавать новые Веб стандарты: так называемый W3C или WORLD ВЕБ WIDE Consortium.

W3Schools это популярный веб сайт для обучения Веб онлайновых технологий ты сможешь находить стандарт HTML CSS JavaScript и какой-то язык больше программирования. Не будь принят с W3C.

Ты сможешь находить несколько тематики на каждом языке, самых полезных: Руководители, Эхемплос и Ссылки.

Во-первых, давайте видеть стандарт HTML

Стандартный HTML:
http://www.w3schools.com/html/default.asp

Здесь они объясняют тебе во всех деталях каждую этикетку HTML.

Этикетки HTML упорядоченные в алфавитном порядке

Ссылка этикеток HTML:
http://www.w3schools.com/tags/default.asp


Ты сможешь санкционировать также твой Веб в W3C, чтобы так подтверждать, выполняет ли твой Веб стандарты HTML.


Примеры для стандарта CSS

Стандарт CSS
http://www.w3schools.com/css/default.asp

Ты сможешь находить все необходимые примеры, чтобы добавлять стили CSS в наших Веб.


Ссылка CSS
http://www.w3schools.com/cssref/default.asp


Сможешь санкционировать также ты CSS, чтобы подтверждать, выполняет ли он стандарты.


Примеры для стандарта JavaScript

Стандартный язык сценариев JavaScript
http://www.w3schools.com/js/js_intro.asp


Эта страница содержит какие-то примеры того, что JavaScript смоги делать.

Язык сценариев JavaScript и HTML DOM снабжает ссылками:


JQuery это библиотека JavaScript.

http://www.w3schools.com/jquery/jquery_intro.asp



Другие Примеры:

Также я оставляю тебе страницу W3Schools с большими примерами используя HTML, CSS, JavaScript и jQuery (Такие примеры как Slideshow, Модальный login..., Прогресс Барс, и т.д.):


Веди JavaScript:
https://developer.mozilla.org / быть / docs / Веб / язык сценариев JavaScript / Guide

4
ответ дан 24.11.2019, 13:30

Теги

Похожие вопросы