Я сказал, что имена классов CSS можно сокращать, не бейте меня!

CSS

Когнитивное искажение

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

Как будто мне изначально не нравился БЭМ, я думал, что это делает мои CSS-имена длинными и вонючими. Когда я останавливаюсь и думаю о проблеме, которую он пытается решить, я понимаю, насколько я предвзят.

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

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

вы не должны сокращать

Когда мы изучаем какой-либо компьютерный язык, их просят назвать его читабельным. Например, в начальнойjs, мы увидим это наименование:

  • getElementById
  • getElementsByClassName
  • getElementsByName

По сути, мы знаем, что это будет делать с первого взгляда.Если вы обнаружите, что некоторые люди меняют вышеуказанное имя на это:

  • getEId
  • getECN
  • getEN

Думаю, вы, как и я, впервые видите этот код, и у вас в голове будет стоять большой вопросительный знак, ткgetEIdВы, наверное, догадываетесь, что он собирается делать. ноgetENЯ мог бы подумать, что это способ конвертировать китайский язык в английский.

Поэтому у всех принято не использовать аббревиатуры при именовании, и стараться писать как можно больше, пусть это и увеличит размер кода, но это стоит рекомендовать для управления проектами.

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

Когда мы будем выбирать сокращения?

Чтобы не делать выводов и не вызывать всеобщего сопротивления в начале, позвольте мне рассказать о том, при каких обстоятельствах мы выбираем аббревиатуры?

  • В жизни: КПИ, IOS, CEO, до скорой встречи...
  • HTML: H1, em, a, br...
  • JS: var, let, $, _...

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

Или взять наш предыдущийJSПримеры таких сред, какgetElementByIdЭтот метод в нашем реальном процессе разработки, если вы используете его всего около 10 раз, я не думаю, что вы подумаете о его сокращении.

Но когда вы обнаружите, что частота его использования достигает сотен тысяч раз, даже если ваш редактор, когда вы печатаетеgetпридумает для васgetElementById，你依然会考虑给这个单词取一个更短的名字。 Например вот так:

function $(id){
    return document.getElementById(id);
}

Проще говоря, мы хотимСокращенное названиеПросто это появляется слишком много раз.

Семантический CSS не следует сокращать

Я считаю, что в среде CSS имя, которое все чаще всего слышат, этоСемантическийслово.

Для CSSСемантическийЧто меня больше всего восхищает, так это то, чтоДзен Сад. Автор пишет структуру DOM и некоторые имена классов CSS, а затем сотни людей могут писать страницы, которые полностью отличаются от внешнего вида автора, основываясь на этих именах классов CSS, вообще не изменяя структуру DOM. Это то же самое, что и скиннинг, идеальное разделение структуры и стиля.

Так что я все еще должен объявить здесь, для смыслового именования, я оченьНе рекомендуетсяиспользоватьСокращенное название.

тогда кромеСемантическийКаковы альтернативы именованию CSS?

Я считаю, что на этот вопрос все еще сложно ответить большинству разработчиков интерфейса. Потому что, проработав в отрасли много лет, я обнаружил, что CSS, в который я всегда верилСемантическийЭто основная причина моей неэффективности в написании CSS. Потому что именование — это то, что занимает много времени. Подробнее см. в других статьях, связанных с CSS, которые я написал ранее.Как управлять CSS «Штаны».

Исходя из того, что имена классов CSS можно сокращать, я дал следующий ответ:ACSS(Atomic CSS), конечно, говорить о том, что ACSS здесь является схемой именования, крайне неточно.

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

Почему ACSS можно сокращать

ACSSАтомарный CSS, как следует из его названия. Это разделение стилей CSS на атомарном уровне.

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

Семантический

.main-title{
    font-size:24px;
    line-height:32px;
    color:$color_primary;
    font-weight:700;
}

<h2 class="main-title">这是主标题</h2>

ACSS

.fontSize24{ font-size:24px; }
.lineHeight32{ line-height:32px; }
.colorPrimary{ color:$color_primary; }
.fontWeight700{ font-weight:700; }

<h2 class="fontSize24 lineHeight32 colorPrimary fontWeight700">这是主标题</h2>

СемантическийКласс иACSSКласс, вероятность повторного использования в принципе не на порядок. Возьмем приведенный выше пример, страница.main-titleЕсли число может достигать 10, это уже очень сложная страница. Даже на всем сайте количество повторных использований ограничено.

Вероятность повторного использования некоторых имен классов в ACSS даже на странице намного выше, чемСемантическийСорт . Например font-size:14px;Очень распространено повторное использование сотни раз в проекте.

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

Как сокращенно используется CSS?

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

Сначала давайте посмотрим, как некоторые известные решения определяют аббревиатуры.

@bootstrap v4

{
    "bg-primary":"background-color:$primary;",
    "p-*":"padding: * ;",
    "m-*":"margin: * ;";
    "d-inline":"display: inline;",
    "sm":"small",
    "md":"middle",
    "col":"column",
    "btn":"button",
    "w-":"width:*;"
    /*...*/
}

@material-ui

{
    "bgcolor":"backgroundColor",
    "zIndex":"z-index",
    "p":"padding",
    "m":"margin",
    "sm":"small",
    "md":"middle"
    /*...*/
}

учитель @zhangxinxu

{
    "dn":"display:none;",
    "b":"font-weight:bold;",
    "cl":"clear:both;",
    "ovh":"verflow:hidden;",
    "ml10":"margin-left:10px;"
}

Я верю, что когда ты видишь здесь, ты такой же грязный, как и я. Что можно сократить? Используете ли вы дефисы, символы подчеркивания или заглавные буквы?

Но причина, по которой мы запутались, заключается в том, что мы не в этих проектных группах. Мы не писали в проекте material-uipaddingЭто было написано сотни раз, и это не написано в проекте начальной загрузки.marginБолее тысячи раз, и ни у кого нет более 10 лет опыта написания страниц, как у г-на Чжана. Так что легко иметь некую устоявшуюся логику мышления.

Многолетний опыт работы, я также веду такую ​​таблицу сопоставления перечисления. Но я также должен признать, что с точки зрения отображения перечисления это очень высоко для новичков. "Ты мед, мышьяк Б" - вот такая правда.

Чтобы решить эту проблему, я потратил много времени и пытался.Следующее является моим текущим выводом (в основном заключенным в логике Учителя Чжана).

@мой план

  1. Возьмем только первую букву:.db{ display:block; };
  2. С цифровым прямым подключением:.mb10{ margin-bottom:10px; };
  3. Дефис представляет отрицательное число:.mb-10{ margin-bottom:-10px; };
  4. знак процента%Выражать:.w100\%{ width:100%; };
  5. для десятичной точки.Выражать:.lh1\.5{ line-height:1.5; };
  6. Параметры подключения (сокращения не допускаются) подчеркнуты:.c_primary{ color:$primay; };
  7. Для не-ACSS не используйте аббревиатуры или общепринятые названия:.clearfix{ };

В CSS требуются специальные символы\Escape не требуется при использовании в html.

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

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

А правила именования снизят вероятность путаницы при разработке. Например, мне сейчас нужен цвет фона.Если нет правила именования, я должен искать в таблице сопоставления, которая похожа на материалbgcolorВсе так же, как бутстрапbg-. Если есть четкое правило именования, вы знаете, что оно должно называтьсяbcПотому что берется только первая буква.

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

<div class="pt16 pl16 pr16 pb16">
  <h3 class="fs16 lh24 fw700 mb4">Atomic css</h3>
  <p class="fs12 lh20">Atomic css 的开发体验真是太好了，速度也是超快。</p>
</div>

<style>
    .card{ padding: 16px; }
    .title{ font-size:16px; line-height:24px; font-weight:700; margin-bottom:4px; }
    .content{ font-size:12px; line-height: 20px; }
</style>
<div class="card">
  <h3 class="title">Atomic css</h3>
  <p class="content">Atomic css 的开发体验真是太好了，速度也是超快。</p>
</div>

Когда другие все еще борются, этот контейнер называетсяcardвсе еще звонитеboxК тому времени, когда ваш код будет написан. Когда вы ознакомитесь со всеми правилами именования, у вас будет иллюзия, что вы хотите определенный стиль в процессе разработки, а затем ваш код написан. это дляопыт разработкиЭто очень хорошо.

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

если вы использовалиemmetС помощью этого плагина вы обнаружите, что даже можете писать свойства css, используя сокращения и автодополнение табуляции. Конечно, мои правила немного отличаются от правил Эммета, но это не влияет на фактическое использование.

Библиотека стилей для пользовательских проектов

Таблица сопоставления ACSS во многом связана с материалами атомарного дизайна студентов-дизайнеров, и даже говорят, что она должна быть последовательной. Например, если все интервалы вашего проекта А разработаны на основе кратных 5, то ваша таблица сопоставления должна иметь:

.mb5{ margin-bottom: 5px; }
.mb10{ margin-bottom: 10px; }
.pt10{ padding-top:10px; }
.pb10{ padding-bottom: 10px; }
/* ... */

Все интервалы вашего проекта B разработаны на основе кратности 4, тогда ваша таблица сопоставления не должна иметь вышеуказанную логику кратности 5, но:

.mb4{ margin-bottom: 4px; }
.mb8{ margin-bottom: 8px; }
.pt4{ padding-top:4px; }
.pb8{ padding-bottom: 8px; }
/* ... */

Если вы считаете, что писать это каждый новый проект очень хлопотно, вы можете порекомендовать упакованную здесь библиотеку Mixin, и less, и sass.sacss.

для пониманияstyle-systemДрузьяstyle-systemСредняя множественная логика (эту логику используют material-ui и bootstrap).

$margins: [4px,8px,16px,24px,32px];
.mb-1{ margin-bottom:$margins[1]; }
.mb-2{ margin-bottom:$margins[2]; }
.mb-3{ margin-bottom:$margins[3]; }
.mb-4{ margin-bottom:$margins[4]; }
/*...*/

Проще говоря, мы находим это нелогичным. и если бы мы добавили20pxинтервал, вся наша логика пойдет не так, прежде чем вызыватьmb-3Имя класса следует заменить наmb-4(Конечно, логика системы стилей должна заключаться в том, чтобы определить спецификацию дизайна до начала разработки и не добавлять отступы, которые не соответствуют спецификации дизайна позже).

Однако в реальности план часто не успевает за изменениями, поэтому цифры лучше использовать прямо и просто и грубо, не думая о развитии.mb4то естьmargin-bottom:4px; ничегоmargin-bottom:$margins[4], ты еще этого не знаешь$marginsЧто в массиве.

Стили выходят за рамки CSS

Хотя эта статья всегда вращалась вокруг CSS, на самом деле я хочу сказать следующее.Стили можно попробовать рассмотреть ACSS, то АЦСС где можно попробовать рассмотретьСокращенное названиеэта точка.

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

Как JS развивается как сумасшедший, так и CSS-in-js. Но это не затрагивает всей нашей логики. Вот самые известныеemotionПример.

import react from 'react';
import "acss.scss";

render (<h2 className="fs24 lh32 c_primary fw700">{children}</h2>);

import react from 'react';
import { css, jsx } from '@emotion/core';
const primary = 'blue';

render(
<h2 className={css`
    font-size:24px;
    line-height:32px;
    color:${primary};
    font-weight:700;
`}>这是主标题</h2>
);

Мы даже используем нативный CSS для решения проблемы, которую хочет решить CSS-in-js (я не буду расширять этот момент, вы можете подумать, почему теория CSS-in-js возникает, когда популярна компонентизация?).

Если вы хотите использовать описанный выше опыт разработки и в React-native. Вы можете ознакомиться с нашими компонентами ACSS, разработанными для React-native.@sacss/react-native.

import React from 'react';
import {Text, View, ImageBackground, Image} from './packages/withAcss';
import mImg1 from "./assets/1.jpg";
import mImg2 from "./assets/2.jpg";

export default function App() {
    return (
        <View bc="#f5f5f5" pt={100} ph={30} h="100%">
            <View mb={16} aic>
                <Image br={32} w={64} h={64} source={mImg1}/>
            </View>
            <Text c="#ffffff" p={16} bc="#4c5fe2" tac mb={16}>Hello world!</Text>
            <ImageBackground source={mImg2} mb={40}>
                <View bc="rgba(255,255,255,.8)">
                    <Text fs={40} lh={100} tac fwb c="#4c5fe2">Hello Again!</Text>
                </View>
            </ImageBackground>
        </View>
    );
};

Для достижения вышеописанного эффекта вам понадобятся всего несколько строк кода.Вы можете сравнить объем кода ниже, независимо от того, используете ли вы таблицы стилей или компоненты стилей. Вы знаете, как это душевно.

наконец

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

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

Но если это не решит проблему, какой смысл в элегантности? Если есть какие-либо упущения, пожалуйста, Хайхан, вы можете оставить мне сообщение, чтобы исправить меня.

решение

Обновлено 21 февраля 2021 г.

SACSS: Static Atomic CSS

npm package jsdelivr github

Сказав так много, кажется, что это просто пустая теория. Вот у меня многолетний опыт, подытожил ACSS npmбиблиотека классов SACSSДля всех, чтобы использовать.

Для ACSS, bootstrap, material-ui, github... все, что связанобиблиотека классов, и тогда самая полная из всей **библиотеки классов** принадлежитtailwindcss. Конечно, они основаны наstyle-systemсозданная теорией. Стоимость начала работы относительно высока и часто требует вмешательства дизайнеров.

По сравнению с этими проектами преимущества моего плана в том, чтоПростойи экстремальный CSSопыт разработки. Настолько просто, что вся логика упирается только всоглашение об именовании, использовать его можно уже через 5 минут после прочтения документа, да еще и полностью понять всю логику. Окончательный опыт разработки CSS отражается в знакомстве с этим набором правил, и вы начнете подозревать, что ваши пальцы медленнее, чем вы думаете о CSS.

Конечно, чтобы гнаться за простотой и опытом разработки, это тоже недостаток, но он не идеален и не имеет отношения к подобнымhover,focus... и другие промежуточные состояния без добавления каких-либо пользовательских точек ответа. Эта часть требует от каждого, основанного на их собственных проектах исоглашение об именованииБесплатное расширение.

Категории