- Оригинальный адрес:Love JavaScript, but hate CSS?
- Оригинальный автор:Dave Ceddia
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:allenlongbaobao
- Корректор:Xekin-FE,L9m
Читатель отметил, что ему было интересно писать JS и React самому, но он разочаровался, когда пришло время иметь дело со стилями.
Я люблю JavaScript, но ненавижу CSS, и у меня не хватает терпения это изменить.
Программирование — это весело, а решение проблем — это весело. Это невероятное чувство, когда ты проделываешь всю тяжелую работу, чтобы твоя программа работала правильно.
Однако,О дерьмо, это CSS. Ваше приложение отлично работает, но немного плохо оформлено, и никто не воспринимает его всерьез, потому что оно не такое большое, как выглядит Apple(TM).
ты не один
Во-первых, позвольте мне прояснить одну вещь: если вам нравится все остальное в интерфейсе,За исключением CSS, то вы не альтернатива. я на самом делеРаботаЯ знаю некоторых разработчиков пользовательского интерфейса профессионального уровня, которые либо плохо разбираются в стилях, либоМожет решить проблемы со стилемНо ненавидьте этот процесс и постарайтесь пройти его как можно быстрее.
Я тоже был в этом затруднительном положении несколько лет назад, CSS подобен волшебному черному ящику, всякий раз, когда я помещаю в него какой-то код, по крайней мере в двух третях случаев, он выводит нечто большее, чем до того, как я начал кодировать Хуже. Я просматриваю Google и StackOverflow, чтобы решить большинство своих проблем с CSS, и молюсь, как сумасшедший, чтобы у кого-то была точно такая же проблема, как у меня (и в каком-то смысле они есть).
Когда я выхожу из этой ужасной тени, я могу ответственно сказать: CSS (и процесс стилизации страниц) — это приобретенный навык. четноедизайнЭто также приобретаемый навык. Строго говоря, это разные навыки.
Применение стиля не то же самое, что дизайн
Получите готовый эскиз визуального дизайна, а затем напишите много кода CSSdivПреобразованный в соответствии с эскизным проектом, этот процесс называетсяприложение стиля (стиль)
Возьмите чистый холст и покажите на нем красивую веб-страницу, этот процесс называетсядизайн
Может случиться так, что вы станете опытным (или даже опытным) в одном из этих двух, в то же время совершенно не зная другого.
В качестве фронтенда вам необходимо овладеть определенными навыками применения стилей (CSS), но не обязательно навыками дизайна.
Могу ли я избежать CSS?
Я также хотел бы сказать вам вслух: забудьте о CSS и сосредоточьтесь на 100% на JS.
Но правда в том, что я не могу. Пока вы хотите идти по пути фронтенда, вы неизбежно будете иметь дело с CSS и немного изучать CSS.
Опыт научил меня, что если вы знаете немного больше о CSS, это не кажется таким уж сложным и даже немного забавным. Это также приятное чувство, когда я обнаруживаю, что могу правильно применять стили к странице и знаю, какие параметры нужно изменить, чтобы получить желаемый эффект.
Что я должен делать?
Теперь, когда вы не можете убежать, изучите некоторые приемы, которые сделают CSS менее сложным.
Рамка
Фреймворки CSS позволяют быстро разрабатывать проекты, и они очень хорошо компенсируют отсутствие дизайнерских навыков. Обычно их можно установить через npm/yarn или развернуть через CDN. Каждый фреймворк имеет свои отличительные стили, поэтому вам нужно взвесить свой выбор. Фреймворки CSS могут помочь вам создать красивое приложение, избегающее многих головных болей со стилем макета (по крайней мере, не так много).
Вот несколько популярных фреймворков (я выбрал совместимые с React):
-
Bootstrap- очень популярен (примечание: на SO много вопросов и ответов) и выглядит очень формально. Последняя версия (V4) выглядит более современно, а старая версия выглядит немного устаревшей. Вы можете настроить стиль или использовать бесплатные темы иПлатные темычтобы изменить его внешний вид. Если вы используете React, вы можете передатьreact-bootstrapчтобы получить множество готовых компонентов, таких как современные элементы управления, всплывающие окна, формы и многое другое.
-
Semantic UI— Еще один популярный CSS-фреймворк, совместимый с компонентами React, он имеет больше доступных компонентов, чем Bootstrap, и (как мне кажется) выглядит более современно.
-
Blueprint— Blueprint выглядит лучше, чем Bootstrap и Semantic UI, по крайней мере, мне так кажется. Но я сам не пользовался. Что выделяет Blueprint, так это то, что он написан на TypeScript и поддерживает разработку TypeScript. это неполагатьсяTypeScript, но если вы используете TS, то стоит попробовать.
В дополнение к трем вышеперечисленным существует множество полезных CSS-фреймворков. Вот некоторыесписок, все они поддерживают React.
Если фреймворк позволяет вам меньше касаться CSS, то следующие два метода помогут вам работать с CSS более непосредственно.
Гибкая верстка (Flexbox)
Гибкий макет — это современный способ использования CSS для отображения контента. по сравнению с предыдущимfloatПлавающие макеты (или спотыкающиеся пять минут назад) намного проще. она имеетхорошая совместимость с браузеромИ очень просто решить некоторые эпические проблемы CSS, такие какЦентрировать по вертикали.
Смотри сюда:
Представьте, как изящно центрировать красный квадрат! Просто добавьте три строки CSS во внешний серый блок:
display: flex; /* turn flexbox on */
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
Если вы щелкнете правой кнопкой мыши по внешнему серому блоку в браузере и посмотрите на элемент, вы увидите, что внутри него гораздо больше трех строк... но лишние не отвечают за центрирование красного квадрата. Добавленный код придает ему серую рамку и делает его прямоугольным блоком, центрированным по горизонтали в статье (margin: a auto), нижнее поле оставляет место для текста ниже.
Если вас интересуют гибкие макеты, на CSS Tricks есть отличный вариант.Полное руководство по макетам Flex,Настоятельно рекомендуется. Flex Layout действительно помогает мне лучше использовать CSS, и это инструмент, над которым я сейчас работаю для решения проблем с макетом.
Макет сетки CSS
Grid-макет — более современный макет, он более мощный, чем flex-макет. Первый может решать макет в двух измерениях (строки и столбцы), второй лучше решает макет в одной строке или столбце. он совместим с браузеромхорошее выступление. Вот что говорит CSS Tricks:
По состоянию на март 2017 года подавляющему большинству браузеров, таких как Chrome (включая Android), Firefox, Safari (включая iOS) и Opera, не нужно добавлять какие-либо префиксы при применении макетов сетки. IE 10 и 11 также поддерживают его, но на основе устаревшего синтаксиса. Пришло время макетов сетки!
Когда я пишу эту статью, я пробовал макет сетки только в типографике. Он мощнее и сложнее, чем гибкий макет. Я обнаружил, что в большинстве случаев эластичный макет очень хорошо удовлетворяет мои потребности. Макет сетки — это то, чему я собираюсь научиться дальше.
Если вы хотите узнать больше, вы можете прочитать CSS TricksПолное руководство по компоновке сетки
более оперативный подход
CSS для решения проблемы большого количества полезных стратегий. Старайтесь избегать случайных цитат или копируйте и вставляйте прямо из StackOverflow, чтобы выполнить задачу.
Попробуйте более надежный способ.
- Позиционирование элементов (flex, grid, абсолютное позиционирование дочерних элементов внутри относительно позиционированного родительского элемента)
- Установите значение поля и заполнения элемента
- установить границу
- установить цвет фона
- потомидеальные детали- Добавьте тени, установите стили настройки в :hover/:active/:focus и т. д.
Подводя итог, можно сказать, что классические законы разработки программного обеспечения, такие какСУХОЙ (не повторяйтесь)так же какLaw of DemeterМожет применяться к макету стиля. В качестве примера рассмотрим, как разместить информацию о пользователе в сочетании с аватарами:
Мы обнаружили, что каждый элемент находится в 20 пикселях от края, поэтому один из способов добиться этого — установить оба элементаmarginзначение20px.
Но у этого есть недостатки. Во-первых, повторим вопрос: если значение маржи нужно изменить, то нам нужно изменить ее в двух местах.
Во-вторых, разве за это не должен отвечать внешний блок, а не сам внутренний элемент, определяющий расстояние от края?
Лучшим решением будет установка внешней коробки.paddingзначение20px, так что внутренним элементам не нужно беспокоиться об их положении. Это также упрощает добавление новых элементов в поле — вам не нужно явно объявлять позицию каждого элемента.
Это всего лишь небольшой пример, используемый для пояснения: размышления о проблемах плюс логические способы упростить макет.
Практические шаги
- Найдите три стиля макета и скопируйте их. Это могут быть виджеты используемого вами сайта (отдельный твит, карточка фотоальбома и т. д.) или реальный контент, такой как кредитные карты, обложки книг и т. д.
- читатьПолное руководство по Flex Layout.
- Используйте гибкий макет для реализации макета, выбранного на шаге 1.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.