API tools faq
paste
zed_com

web pr 3

zed_com
Mar 8th, 2017
148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.01 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Andrey Liapin</title>
  6.     <link rel="stylesheet" href="index.css">
  7. </head>
  8. <body>
  9.     <h1 class="main-header">Именование классов в CSS</h1>
  10.  
  11.     <h2 class="section-title">Назначайте классы как можно ниже по DOM-дереву</h2>
  12.  
  13.     <p>Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.</p>
  14.  
  15.     <h4>Пример:</h4>
  16.     <pre class="code">
  17.         &lt;main class='mainly'&gt;
  18.           &lt;p&gt;Lorem ipsum&lt;/p&gt; &lt;!-- Я хотел бы застилизовать этот абзац --&gt;
  19.         &lt/main&gt
  20.  
  21.     main.mainly p { /* Не делайте этого */
  22.     }
  23.  
  24.     /* Вместо этого присвойте название класса p : <p class='paragraphly' /> */
  25.     .paragraphly {
  26.     }
  27.     </pre>
  28.     <span class="source">Источник:</span> <a href="http://vk.com">Крис Койер</a>
  29.  
  30.  
  31.     <h2 class="section-title">Называйте классы по содержимому</h2>
  32.  
  33.     <h4>Пример:<h4>
  34.     <pre>
  35.     .c-header-logo {
  36.       /* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */
  37.     }
  38.     </pre>
  39.     <span class="example">Источник:</span>
  40.     <a href="phpied.com">phpied.com</a>
  41.  
  42.     <h2 class="section-title">Не называйте класс по содержимому, если картинка нагляднее</h2>
  43.  
  44.  
  45.     <p>Скажем, лого шапки на самом деле выглядит так:</p>
  46.      
  47.     <img src="trapecia.png" alt="">
  48.     <p>Тогда не называйте его header-logo.</p>
  49.     <pre>
  50.     .guillotine {
  51.       /* О, сразу видно, что мы хотим стилизовать */
  52.     }
  53.     </pre>
  54.     <h2 class="section-title">
  55.     4. Попробуйте суффикс <span class="thin-text">-like</span> для лучшей переносимости кода.
  56.     </h2>
  57.  
  58.     <h4>Пример:</h4>
  59.     <pre>
  60.     h3, .h3-like {
  61.     /* какое-то оформление */
  62.     }
  63.  
  64.     &lt;p class='h3-like'&gt;
  65.       <!-- Я НЕ заголовок h3, но поскольку дизайнер велел мне выглядеть так же,
  66.           я не могу жаловаться на своё название класса -->
  67.     &lt;/p&gt;
  68.     </pre>
  69.     <span class="source">Источник:</span><a href="vk.com">KNACSS v4</a>
  70.      
  71.     <h4 class="section-title">5. Не используйте верблюжийРегистр</h4>
  72.  
  73.  
  74.     <p>Это затрудняет чтение</p>
  75.  
  76.     <h4>Пример:</h4>
  77.     <pre>
  78.     .navToOneModuleICreated {
  79.       font-size:2em;
  80.     }
  81.     /* против */
  82.     .nav-to-one-module-i-created {
  83.       font-size:2em;
  84.     }
  85.     </pre>
  86.     <span class="source">Источник:</span>
  87.     <a href="vk.com">Гарри Робертс</a>
  88.  
  89.     <h4 class="section-title">6. Пробуйте БЭМ</h4>
  90.  
  91.     <p>На сегодняшний день это одно из самых популярных соглашений.</p>
  92.  
  93.     <ul>
  94.         <li>Поначалу он кажется странным, но не бойтесь.</li>
  95.         <li>Порог вхождения очень низкий</li>
  96.         <li>Можно использовать его уже сейчас в любой части проекта.</li>
  97.         <li>Долгосрочные перспективы колоссальны</li>
  98.     </ul>
  99.  
  100.     <p>(двойной дефис) означает вариант элемента.</p>
  101.  
  102.     <p>(двойное подчёркивание) означает дочерний элемент.</p>
  103.  
  104.     <span class="source">Пример:</span>
  105.  
  106.     <pre>
  107.     &lt;button class='btn btn--warning'&gt &lt;!-- oдин из вариантов .btn — .btn--warning --&gt
  108.       &lt;div class='btn__text'&gt&lt;/div&gt; &lt;!-- один из дочерних элементов .btn — .btn__text--&gt;
  109.     &lt;/button&gt;
  110.  
  111.     .btn--warning {
  112.     /* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */
  113.     }
  114.     .btn__text {
  115.     /* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */
  116.     }
  117.     </pre>
  118.     <span class="source">Источник:</span>
  119.     <a href="vk.com">Калиг, пятьдесят оттенков БЭМ</a>
  120.  
  121.     <<span class="source">Рекомендовано:</span>
  122.     <a href="vk.com">Smashing Magazine, боремся с БЭМ</a>
  123.  
  124.     <h2 class="section-title">7. Пробуйте ещё страшнее</h2>
  125.  
  126.     <p>БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.</p>
  127.  
  128.     <p>Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.</p>
  129.  
  130.     <p>Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.</p>
  131.  
  132.     <h4>Пример:</h4>
  133.  
  134.     <pre>
  135.     .DIMENSIONS_OF_mycomponent {
  136.       /* Куда ещё противнее. Зато теперь понятнее, о чём речь. */
  137.       /* Я использую его для классов-заготовок в SASS. */
  138.       /* Но всё же не злоупотребляйте этим правилом. */
  139.     }
  140.     </pre>
  141.     <h4 class="section-title">8. Не сокращайте описывающие слова</h4>
  142.  
  143.     <p>Помимо уже устоявшихся nav, txt, url… следует избегать любых аббревиатур.</p>
  144.  
  145.     <span class="source">Источник:</span>
  146.     <a href="phpied.com">phpied.com</a>
  147.  
  148.     <h4 class="section-title">9. Пробуйте использовать только одну букву в качестве осмысленного префикса</h4>
  149.     <p>В случае визуального компонента начинайте с c-, а в случае объекта (напр. макет) — с o-, мне просто нравится этот трюк Гарри Робертса.</p>
  150.  
  151.     <h4>Пример:</h4>
  152.     <pre>
  153.     &lt;button class='o-layout'&gt;
  154.       &lt;div class='o-layout-item o-grid c-button'>&lt;/div&gt;
  155.       &lt;!-- С первого взгляда на HTML видно, что за что отвечает.-&gt;
  156.     &lt;/button&gt;
  157.     </pre>
  158.     <span class="source">Источник:</span>
  159.     <a href="vk.com">Гарри Робертс</a>
  160.  
  161.     <h2 class="section-title">10. Пробуйте [], когда слишком много классов одного типа</h2>
  162.     <p>Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .], они нужны только здесь, чтобы помочь другим читать HTML.</p>
  163.     <h4>Пример:</h4>
  164.     <pre>
  165.     &lt;button class='[ o-layout ]'&gt;
  166.       &lt;div class='[ o-layout-item o-layout-item--first ] c-button'&gt;&lt;/div&gt;
  167.       &lt;!-- С первого взгляда на HTML видно, что за что отвечает.--&gt;
  168.     &lt;/button&gt;
  169.     </pre>
  170.     <span class="source">Источник:</span>
  171.     <a href="vk.com">исходный код «Inuit Kitchen Sink»</a>
  172.  
  173.     <h2 class="section-title">11. Используйте префикс js-, если он используется только для JavaScript</h2>
  174.     <p>Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js-.</p>
  175.     <h4>Пример:</h4>
  176.     <pre>
  177.     &lt;button class='js-click-me'&gt;
  178.       &lt;!-- При беглом просмотре HTML я понимаю, что у этой кнопки нет CSS-селектора для оформления.
  179.            Но JavaScript использует её, видимо, чтобы поймать какое-то событие. --&gt;
  180.     &lt;/button&gt;
  181.     </pre>
  182.     <span class="source">Источник:</span>
  183.     <a href="vk.com">Дерик Бейли, книга по marionnette.js</a>
  184.  
  185.     <h3 class="section-title">12. Старайтесь отделить родительский элемент от дочернего</h3>
  186.  
  187.     <p>Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.</p>
  188.     <h4>Пример:</h4>
  189.  
  190.     <p>(плохо)</p>
  191.  
  192.     <pre>
  193.     &lt;button class='a'&gt;
  194.       &lt;!-- Этот класс ниже включает сочетание свойств,
  195.            некоторые из которых участвуют в отношении a-b,
  196.            а некоторые — в отношении b-c,
  197.            CSS-файл будет трудно читать.--&gt;
  198.       &lt;div class='child-of-a-and-parent-of-c'&gt;
  199.         &lt;div class='c'&gt;
  200.         &lt;/div&gt;
  201.       &lt;/div&gt;
  202.     &lt;/button&gt;
  203.     </pre>
  204.  
  205.     <p>(хорошо)</p>
  206.     <pre>
  207.     &lt;button class='a'&gt;
  208.       &lt;!-- Разделите на 2 класса--&gt;
  209.       &lt;div class='child-of-a parent-of-c'&gt;
  210.         &lt;div class='c'&gt;
  211.         &lt;/div&gt;
  212.       &lt;/div&gt;
  213.     &lt;/button&gt;
  214.     </pre>
  215.  
  216.     <div class="section-title">13. Несемантические классы должны явно описывать свои свойства.</div>
  217.     <p>Большинство из них содержат только одно свойство, и незачем его скрывать.</p>
  218.  
  219.     <pre>
  220.     .horizontal-alignment { /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */
  221.       text-align: center;
  222.     }
  223.     /* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */
  224.     .u-text-align--center {
  225.       text-align: center;
  226.     }
  227.     </pre>
  228.  
  229.     <h2 class="section-title">14. Явные хаки (I)</h2>
  230.  
  231.     <p>Если вы не довольны вашем CSS-селектором, скажите это всем.</p>
  232.  
  233.     <p>Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.</p>
  234.  
  235.     <p>Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.</p>
  236.  
  237.     <p>Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.</p>
  238.     <h4>Пример:</h4>
  239.  
  240.     <pre>
  241.     .my-component {
  242.       margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */
  243.     }
  244.     </pre>
  245.  
  246.     <h2 class="section-title">15. Явные хаки (II)</h2>
  247.     <p>Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css</p>
  248.     <p>Опять же, Гарри Робертс подсказал</p>
  249.  
  250.     <span class="source">Источник:</span>
  251.     <a href="vk.com">Гарри Робертс</a>
  252.  
  253.     <h2 class="section-title">16. Старайтесь избегать более двух слов для одного имени</h2>
  254.     <p>Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.</p>
  255.     <h4>Пример:</h4>
  256.     <pre>
  257.     .button {
  258.       /* Хорошо */
  259.     }
  260.     .dropdown-button {
  261.       /* Всё ещё хорошо */
  262.     }
  263.     .dropdown-button-part-one {
  264.       /* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */
  265.     }
  266.     .dropdown-button-part-one__button-admin {
  267.       /* Ой, всё!!! */
  268.     }
  269.     </pre>
  270.     <h2 class="section-title">17. Используйте атрибут data-state для указания состояния компонента</h2>
  271.     <p>Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.</p>
  272.     <h4>Пример:</h4>
  273.     <pre>
  274.     &lt;button class='c-button c-button--warning is-active'&gt;
  275.       &lt;!-- Не делайте этого --&gt;
  276.     &lt;/button&gt;
  277.     &lt;button class='c-button c-button--warning' data-state='is-active'>
  278.       &lt;!-- Так-то лучше.
  279.       Я удалил объявление класа,
  280.       это гарантирует единственность состояния,
  281.       и для тех, кто использует Sass, это сделает код чище.--&gt;
  282.     &lt;/button&gt;
  283.     </pre>
  284.  
  285.     <span class="source">Источник:</span>
  286.     <a href="vk.com">к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.</a>
  287.  
  288.     <h2 class="section-title">18. Используйте префиксы has- или is- для состояния</h2>
  289.  
  290.     <p>Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.</p>
  291.  
  292.     <h4>Пример:</h4>
  293.  
  294.     <pre>
  295.     .activated {
  296.       /* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */
  297.     }
  298.     .is-activated {
  299.       /* Да, вы оформляете состояние. */
  300.     }
  301.     </pre>
  302.     <span class="source">Источник:</span>
  303.     <a href="vk.com">оформление кода в Mobify</a>
  304.  
  305.     <h2 class="section-title">19. Используйте дефис в качестве префикса при сочетании нескольких состояний</h2>
  306.     <p>Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.</p>
  307.  
  308.     <h4>Пример:</h4>
  309.  
  310.     <pre>
  311.     &lt;button class="btn -color-red -size-large -shape-round"&gt;&lt;/button&gt;
  312.     </pre>
  313.  
  314.     <span class="source">Источник:</span>
  315.     <a href="vk.com">Бен Смифет</a>
  316.  
  317.     <h2 class="section-title">20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных</h2>
  318.     <p>Это упрощает чтение документа.</p>
  319.     <h4>Пример:</h4>
  320.  
  321.     <pre>
  322.     &lt;button class="c-button"&gt;
  323.       &lt;!-- ПЛОХОЙ ПРИМЕР: в нём используются " вместо '. В этом крошечном примере это не играет особой роли, но когда дело касается сотни селекторов в HTML-файле, одиночные кавычки — лучшая идея. --&gt;
  324.     &lt;/button&gt;
  325.     &lt;button class='c-button'&gt;
  326.       &lt;!-- Хорошо!--&gt;
  327.     &lt;/button&gt;
  328.     </pre>
  329.  
  330.     <span class="source">Источник:</span>
  331.     <a href="vk.com">я узнал это, когда работал с командой Predicsis</a>
  332.  
  333.  
  334.     <h2 class="section-title">21. Не следуйте правилам</h2>
  335.     <p>Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.</p>
  336.  
  337.     <p>Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет: </p>
  338.  
  339.     <ol>
  340.         <li>Постарайтесь улучшать своё именование классов, </li>
  341.         <li>соблюдайте его последовательно для данного проекта, </li>
  342.         <li>но избегайте переусложнения.</li>
  343.     </ol>
  344.     <p>Если правило вам не подходит, просто пропустите его.</p>
  345.  
  346.     <p class="goodbye-text">Наслаждайтесь!</p>
  347.  
  348. </body>
  349. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!