Как закомментировать стили css

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

Чтобы закомментировать строчку в коде PHP (код основных файлов темы с расширением *.php, нужно использовать такую конструкцию:

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

Если это код CSS (файл style.css), то закомментировать строчку можно так:

Если это файл с расширением HTML (такие редко, но тоже встречаются при создании блогов), или блок с кодом HTML, то закомментировать строчку кода можно так:

Как делать комментарии в css?

Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш ctrl + / или cmd + / .

Как написать комментарий в html коде?

Тег используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования HTML страницы в дальнейшем.

Как закомментировать строку в блокноте?

По умолчанию для блочного комментария это CTRL + SHIFT + Q . Таким образом, вы можете выделить блок кода, а затем использовать этот ярлык.

Как в Python сделать комментировать?

В Python, для однострочных комментариев используется символ # . Но если нужно закомментировать большой блок кода, то приходится приписывать # в начале каждой строки.

Как комментировать в Sublime Text?

Свернуть текущий блок Ctrl+Shift+[ Ctrl+Cmd+[
Развернуть текущий блок Ctrl+Shift+] Ctrl+Cmd+]
Закомментировать строку Ctrl+/ Cmd+/
Закомментировать блок кода (курсор в блоке) Ctrl+Shift+/ —

Как подключить CSS в HTML?

Рассмотрим каждый из них на примерах.

Как сделать нумерованный список в HTML?

Как указать версию HTML?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы.

Что такое закомментировать строку?

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

Как в Notepad ++ выделить несколько строк?

Однако, Notepad++ позволяет выделение столбцом, который выделяет прямоугольником, захватывая несколько смежных строк. Чтобы выделить столбцом, используйте вышеуказанные способы, удерживая нажатой клавишу Alt. Например, попробуйте выделять текст мышкой, удерживая клавишу Alt, захватывая несколько строк.

Как закомментировать несколько строк в Python?

Так, например, чтобы закомментировать несколько строк Python кода, в PyCharm, следует их выделить и нажать комбинацию клавиш +.

Как можно называть переменные в Python?

Официально имена переменных в Python могут быть любой длины и состоять из прописных и строчных букв ( + A-Z + , + a-z + ), цифр ( + 0-9 + ) и символа подчеркивания ( + _ + ). Дополнительное ограничение заключается в том, что хотя имя переменной может содержать цифры, первый символ имени переменной не может быть цифрой.

Comments in CSS

The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.

Some CSS preprocessor syntax allow for JavaScript-style single-line comments, like this:

And actually, it’s a bit weird, but vanilla CSS also kind of supports that, it’s just a trick and you have to be careful.

Comments

I prefer comment to appear this way, but everyone is different how they comment. One this thing is for sure. You can never comment too much! (as they stripped anyhow in css compression).

Похожие публикации:

Для чего node js
За что на веб странице отвечает css
Как сделать расстояние между картинками css
Как сделать скролл внутри блока css

Настройка компонентов React с помощью свойств

В этом руководстве вы создадите пользовательские компоненты, передавая свойства в ваш компонент. Свойства — это аргументы, которые вы предоставляете элементу JSX. Они выглядят как стандартные HTML-свойства, но не являются предопределенными и могут использовать несколько типов данных JavaScript, включая числа, строки, функции, массивы и даже другие компоненты React. Ваши пользовательские компоненты могут использовать свойства для отображения данных или использования этих данных, чтобы сделать компоненты интерактивным. Свойства — это ключ к созданию компонентов, которые можно легко адаптировать под разные ситуации, а их знание даст вам инструменты для разработки пользовательских компонентов, которые могут обрабатывать уникальные ситуации.

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

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

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

Предварительные требования

Вам потребуется среда разработки для Node.js. Данный обучающий модуль был протестирован с версией Node.js 10.20.1 и версией npm 6.14.4. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.
В этом руководстве вы будете использовать Create React App. Вы можете найти инструкции по установке приложения с помощью Create React App в статье Настройка проекта React с помощью Create React App. Данное руководство подразумевает знание компонентов React, представление о которых вы можете получить из нашего руководства по созданию пользовательских компонентов в React.
Также вам потребуются базовые знания JavaScript, которые вы можете получить в руководстве Написание кода на JavaScript, а также базовые знания HTML и CSS. Хорошим источником информации о HTML и CSS является сеть разработчиков Mozilla.

Шаг 1 — Создание пустого проекта

На этом шаге мы создадим новый проект, используя Create React App. Затем вы удалите пример проекта и связанные файлы, которые устанавливаются при инициализации проекта. В заключение вы создадите простую структуру файлов для организации ваших компонентов.

Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app :

После завершения создания проекта перейдите в его директорию:

В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

Вы получите запущенный локальный сервер. Если проект не был открыт в браузере, вы можете открыть его, перейдя на страницу http://localhost:3000/ . Если вы запустили приложение на удаленном сервере, воспользуйтесь адресом http:// your_IP_address :3000 .

Ваш браузер загрузит простое приложение React в качестве элемента Create React App:

Шаблон проекта React

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

Откройте src/App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда. Дополнительную информацию об App.js можно найти в статье Настройка проекта React с помощью Create React App.

Откройте src/App.js с помощью следующей команды:

Вы увидите следующий файл:

prop-tutorial/src/App.js

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App()  return ( div className="App"> header className="App-header"> img src=logo> className="App-logo" alt="logo" /> p> Edit code>src/App.js/code> and save to reload. /p> a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React /a> /header> /div> ); > export default App;

Удалите строку import logo from ‘./logo.svg’; . Затем замените весь код оператора return , который должен возвращать набор пустых тегов: <> . В результате вы получите страницу валидации, которая ничего не возвращает. Окончательный код будет выглядеть следующим образом:

prop-tutorial/src/App.js

 import React from 'react'; import './App.css'; function App()  return >/>; > export default App;

Сохраните изменения и закройте текстовый редактор.

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

В окне терминала введите следующую команду:

Если вы откроете ваш браузер, то увидите пустой экран.

пустой экран в chrome

Теперь, когда вы успешно очистили пример проекта Create React App, создайте простую структуру файлов. Это позволит вам поддерживать ваши компоненты изолированными и независимыми.

Создайте каталог с именем components в каталоге src . В нем будут храниться все ваши пользовательские компоненты.

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

Создайте каталог для App :

Переместите все файлы App в этот каталог. Используйте подстановочный символ * для выбора любых файлов, начинающихся с App. вне зависимости от их расширения. Затем используйте команду mv для их отправки в новый каталог.

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

Оператор импорта должен указывать на файл App.js в каталоге App , поэтому необходимо внести следующее изменение:

prop-tutorial/src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App/App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( React.StrictMode> App /> /React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

Сохраните и закройте файл.

Теперь, когда проект настроен, вы можете создать ваш первый компонент.

Шаг 2 — Настройка динамических компонентов со свойствами

На этом шаге вы создадите компонент, который будет изменяться на основе передаваемой информации, т.е. свойств. Свойства — это аргументы, которые вы передаете функции или классу, но так как ваши компоненты трансформируются в HTML-объекты с JSX, вы будете передавать свойства в виде HTML-атрибутов. В отличие от HTML-элементов, вы можете передавать множество разных типов данных, от строк до массивов, объектов и даже функций.

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

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

Добавление данных

Во-первых, вам потребуются шаблонные данные. Создайте файл в каталоге src/App с именем data.

Откройте новый файл в текстовом редакторе:

Далее добавьте массив объектов, который вы будете использовать в качестве примера данных:

prop-tutorial/src/components/App/data.js

export default [  name: 'Lion', scientificName: 'Panthero leo', size: 140, diet: ['meat'], >,  name: 'Gorilla', scientificName: 'Gorilla beringei', size: 205, diet: ['plants', 'insects'], additional:  notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.' > >,  name: 'Zebra', scientificName: 'Equus quagga', size: 322, diet: ['plants'], additional:  notes: 'There are three different species of zebra.', link: 'https://en.wikipedia.org/wiki/Zebra' > > ]

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

Сохраните и закройте файл.

Создание компонентов

Затем создайте временный компонент AnimalCard . Этот компонент будет получать свойства и отображать данные.

Сначала создайте каталог в src/components с названием AnimalCard , а затем файл с именем src/components/AnimalCard/AnimalCard.js и CSS-файл с именем src/components/AnimalCard/AnimalCard.css .

Откройте AnimalCard.js в текстовом редакторе:

Добавьте базовый компонент, который импортирует CSS и возвращает тег .

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import './AnimalCard.css' export default function AnimalCard()  return h2>Animal/h2> >

Сохраните и закройте файл. Теперь вам нужно импортировать данные и компонент в базовый компонент App .

Импортируйте данные и компонент, а затем пройдите по данным, возвращая компонент для каждого элемента в массиве:

prop-tutorial/src/components/App/App.js

import React from 'react'; import data from './data'; import AnimalCard from '../AnimalCard/AnimalCard'; import './App.css'; function App()  return ( div className="wrapper"> h1>Animals/h1> data.map(animal => ( AnimalCard key=animal.name>/> ))> /div> ) > export default App;

Сохраните и закройте файл. Здесь вы используете метод массива .map() для итерации по данным. Кроме добавления цикла у вас также имеется оборачивающий div с классом, который вы будете использовать для стилей, и тег для наименования вашего проекта.

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

Проект React в браузере без стилей

Далее добавьте несколько стилей для выравнивания элементов. Откройте App.css :

Замените его содержимое на следующее для организации элементов:

prop-tutorial/src/components/App/App.css

.wrapper  display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; > .wrapper h1  text-align: center; width: 100%; >

Здесь используется flexbox для приведения в порядок данных и их выравнивания. padding добавляет некоторое пространство в окне браузера. justify-content будет обеспечивать дополнительное пространство между элементами, а .wrapper h1 будет размещать заголовок Animal на всю его длину.

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

Проект React в браузере с распределенными данными

Добавление свойств

Теперь, когда у вас есть настроенные компоненты, вы можете добавить свое первое свойство. При итерации по данным у вас был доступ к каждому объекту в массиве data и элементам, которые он содержит. Вы будете добавлять каждый элемент данных в отдельное свойство, которое затем будет использоваться в компоненте AnimalCard .

Добавьте свойство name в AnimalCard .

prop-tutorial/src/components/App/App.js

import React from 'react'; . function App()  return ( div className="wrapper"> h1>Animals/h1> data.map(animal => ( AnimalCard key=animal.name> name=animal.name> /> ))> /div> ) > export default App;

Сохраните и закройте файл. Свойство name выглядит как стандартный HTML-атрибут, но вместо строки вы передаете свойство name объекта animal в фигурных скобках.

Теперь, когда вы передали одно свойство в новый компонент, необходимо использовать его. Откройте AnimalCard.js :

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

prop-tutorial/src/components/AnimalCard/AnimalCard.js

 import React from 'react'; import './AnimalCard.css' export default function AnimalCard(props)  const  name > = props; return ( h2>name>/h2> ); >

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

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

Также вы можете использовать свойство в объекте prop , используя запись через точку. В качестве примера вы можете создать элемент следующим образом: . Преимущество деструктурирования состоит в том, что вы можете собирать неиспользуемые свойства и использовать оператор rest объекта.

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

Проекты React с указанием имен животных

Свойство name представляет собой строку, но строка может быть любым типом данных, который вы можете передавать функции JavaScript. Чтобы посмотреть, как это работает, добавьте остальные данные.

Откройте файл App.js :

Добавьте свойство для каждого из следующих элементов: scientificName , size , diet и additional . Они сдержат строки, целые числа, массивы и объекты.

prop-tutorial/src/components/App/App.js

import React from 'react'; . function App()  return ( div className="wrapper"> h1>Animals/h1> albums.map(album => ( AnimalCard additional=animal.additional> diet=animal.diet> key=animal.name> name=animal.name> scientificName=animal.scientificName> size=animal.size> /> ))> /div> ) > export default App;

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

Сохраните и закройте файл. Откройте AnimalCard.js .

На этот раз выполните деструктуризацию свойств списка параметров функции и используйте данные в компоненте:

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import './AnimalCard.css' export default function AnimalCard( additional, diet, name, scientificName, size >)  return ( div> h2>name>/h2> h3>scientificName>/h3> h4>size>kg/h4> div>diet.join(', ')>./div> /div> ); >

После получения данных вы можете добавить scientificName и size в теги заголовка, но вам нужно превратить массив в строку, чтобы React мог отобразить их на странице. Вы можете сделать это с помощью join(‘, ‘) , который будет создавать разделенный запятой список.

Сохраните и закройте файл. Сделав это и обновив браузер, вы увидите структурированные данные.

Проект React с полным списком данных для животных

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

Создайте функцию showAdditionalData , которая будет конвертировать объект в строку и отображать ее в качестве оповещения.

prop-tutorial/src/components/App/App.js

import React from 'react'; . function showAdditional(additional)  const alertInformation = Object.entries(additional) .map(information => `$information[0]>: $information[1]>`) .join('\n'); alert(alertInformation) >; function App()  return ( div className="wrapper"> h1>Animals/h1> data.map(animal => ( AnimalCard additional=animal.additional> diet=animal.diet> key=animal.name> name=animal.name> scientificName=animal.scientificName> showAdditional=showAdditional> size=animal.size> /> ))> /div> ) > export default App;

Функция showAdditional конвертирует объект в массив пар, где первый элемент — это ключ, а второй — значение. Затем она преобразовывает данные, конвертируя пару ключей в строку. После этого функция добавляет разделитель строки \n , прежде чем передавать полную строку в сигнальную функцию.

Поскольку JavaScript может принимать функции в качестве аргументов, React также может принимать функции в качестве свойств. Поэтому вы можете передать showAdditional в AnimalCard в качестве свойства с именем showAdditional .

Сохраните и закройте файл. Откройте AnimalCard :

Извлеките функцию showAdditional из объекта свойства, затем создайте с событием onClick , которое вызывает функцию с объектом additional :

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import './AnimalCard.css' export default function AnimalCard( additional, diet, name, scientificName, showAdditional, size >)  return ( div> h2>name>/h2> h3>scientificName>/h3> h4>size>kg/h4> div>diet.join(', ')>./div> button onClick=() => showAdditional(additional)>>More Info/button> /div> ); >

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

Оповещение с информацией

Если вы попробуете нажать More Info для карточки Lion , то получите ошибку. Это связано с тем, что для льва дополнительные данные отсутствуют. Вы увидите, как исправить это, в шаге 3.

В заключение давайте добавим немного оформления в наш проект. Добавьте className для animal-wrapper в div в AnimalCard :

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import './AnimalCard.css' export default function AnimalCard( . return ( div className="animal-wrapper"> . /div> ) >

Сохраните и закройте файл. Откройте AnimalCard.css :

Добавьте CSS для добавления тонкой границы и отступа для карточек и кнопки:

prop-tutorial/src/components/AnimalCard/AnimalCard.css

.animal-wrapper  border: solid black 1px; margin: 10px; padding: 10px; width: 200px; > .animal-wrapper button  font-size: 1em; border: solid black 1px; padding: 10; background: none; cursor: pointer; margin: 10px 0; >

Это код CSS добавит небольшую границу для карточки и заменит стиль кнопки, используемый по умолчанию, на границу и отступ. cursor: pointer будет менять курсор при наведении на кнопку.

Сохраните и закройте файл. После выполнения этих действий и обновления браузера вы увидите данные в отдельных карточках.

Проект React с добавленными стилями для карточек животных

На данный момент вы создали два пользовательских компонента. Вы передали данные второму компоненту из первого компонента, используя свойства. Свойства включают разные данные, такие как строки, целые числа, массивы, объекты и функции. В вашем втором компоненте вы использовали свойства для создания динамического компонента с помощью JSX.

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

Шаг 3 — Создание предсказуемых свойств с помощью PropTypes и defaultProps

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

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

Пакет prop-types устанавливается вместе с Create React App, поэтому для его использования необходимо только импортировать его в ваш компонент.

Затем импортируйте PropTypes из prop-types :

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import PropTypes from 'prop-types'; import './AnimalCard.css' export default function AnimalCard( . >

Добавьте PropTypes прямо в функцию компонента. В JavaScript функции являются объектами, что означает, что вы можете добавить свойства, используя точечный синтаксис. Добавьте следующие PropTypes в AnimalCard.js :

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import PropTypes from 'prop-types'; import './AnimalCard.css' export default function AnimalCard( . > AnimalCard.propTypes =  additional: PropTypes.shape( link: PropTypes.string, notes: PropTypes.string >), diet: PropTypes.arrayOf(PropTypes.string).isRequired, name: PropTypes.string.isRequired, scientificName: PropTypes.string.isRequired, showAdditional: PropTypes.func.isRequired, size: PropTypes.number.isRequired, >

Сохраните и закройте файл.

Как видите, существует множество разных PropTypes . Это только небольшой пример; изучите официальную документацию React, чтобы узнать об остальных типах, которые вы можете использовать.

Давайте начнем со свойства name . Здесь вы указываете, что в name должна находиться строка . Свойство scientificName аналогично предыдущему примеру. size — число , которое может включать как числа с плавающей точкой, например, 1.5 , так и целые числа, например 6 . showAdditional — это функция ( func ).

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

size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

Свойство additional также немного более сложное. В этом случае вы указываете объект, но, чтобы внести большую ясность, вы указываете, что должен содержать объект. Для этого вы можете использовать PropTypes.shape , принимающий объект с дополнительными полями, которым требуются собственные значения PropTypes . В нашем случае link и notes имеют значение PropTypes.string .

В настоящее время все данные имеют правильную форму и отвечают свойствам. Чтобы узнать, что произойдет, если значение PropTypes не будет совпадать, откройте ваши данные:

Измените для size значение на строку в первом элементе:

prop-tutorial/src/components/App/data.js

export default [  name: 'Lion', scientificName: 'Panthero leo', size: '140', diet: ['meat'], >, . ]

Сохраните файл. После выполнения этих действий и обновления браузера вы увидите ошибку в консоли.

Error
index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

Браузер с ошибкой типизации

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

Измените данные обратно на правильный тип:

prop-tutorial/src/components/App/data.js

export default [  name: 'Lion', scientificName: 'Panthero leo', size: 140, diet: ['meat'], >, . ]

Сохраните и закройте файл.

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

Если свойство не обязательное, вы можете добавить значение по умолчанию. Рекомендуется всегда добавлять значение по умолчанию для предотвращения ошибок при исполнении, если свойство не обязательное. Например, в компоненте AnimalCard вы вызываете функцию с данными additional . Если их там нет, функция попытается получить их и изменить несуществующий объект, в результате чего приложение упадет.

Чтобы предотвратить эту проблему, добавьте значение defaultProp для additional :

prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react'; import PropTypes from 'prop-types'; import './AnimalCard.css' export default function AnimalCard( . > AnimalCard.propTypes =  additional: PropTypes.shape( link: PropTypes.string, notes: PropTypes.string >), . > AnimalCard.defaultProps =  additional:  notes: 'No Additional Information' > >

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

Сохраните и закройте файл. После этого обновите браузер. После обновления страницы нажмите кнопку More Info карточки Lion. У нее нет поля additional в данных, поэтому свойство не определено . Но AnimalCard будет заменять свойство по умолчанию.

Браузер с сообщением по умолчанию в оповещении

Теперь ваши свойства хорошо задокументированы и являются либо обязательными, либо имеют значение по умолчанию для обеспечения предсказуемого кода. Это позволит будущим разработчикам (в том числе вам) понимать, какие свойства требуются компоненту. Это облегчит повторное использование ваших компонентов, предоставляя вам полную информацию о том, как компонент будет использовать данные, которые он получает.

Заключение

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Маркированный список (list-style) в CSS

В разработке сайтов и создании Интернет-магазинов часто нужно выводить маркированные списки ul li в различных модулях. И постоянно возникают вопросы о том как правильно изменить стиль ul, как скрыть маркеры, как указать свой вывод маркера?

Как убрать или изменить маркер списка в CSS?

Пункт 1
Пункт 2
Пункт 3

CSS код своего маркера li

Помогла ли вам статья?

352 раз уже помогла

Комментарии: (0) Написать комментарий

Как изменить CSS-стили при помощи JavaScript

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-* .

Хотя этот ответ неполный, подумайте над следующими вопросами:

Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.

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

Используйте встроенные стили

До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color , background и border . Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style элемента.

Два следующих способа изменить размер шрифта для элемента hero равнозначны:

document.getElementById('hero').style = 'font-size: 12rem;'; document.getElementById('hero').style.fontSize = '12rem';

Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:

Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
При таком подходе CSS-селекторы не могут формировать семантические абстракции.
Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
Повторяющиеся стили раздувают ваш HTML.
У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.

В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.

Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.

Когда стоит применять встроенный CSS

Для обновления стилей отдельного элемента во время выполнения.
Для быстрой проверки чего-либо.
Когда таблицы стилей недоступны.

Используйте HTML-атрибуты

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

// toggles HTML semantic state document.getElementById('cta').disabled = true; // a aria based semantic button state document.getElementById('cta').ariaExpanded = "true"; // a class based semantic primary variation document.getElementById('cta').classList.toggle('primary');

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

Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has() уже на горизонте, это стало проще.

Когда стоит модифицировать атрибуты помимо style

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

Используйте CSSOM

Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.

Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).

Обратившись к объекту styleSheets документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:

const thirdPartyStylesheet = document.styleSheets[0]; //index 15 rule color: red !important; thirdPartyStylesheet.deleteRule(15);

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

Когда вы засоряете свои встроенные стили многочисленными !important для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.

Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.

Когда стоит модифицировать CSSOM

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

Используйте пользовательские свойства CSS

Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.

Пользовательские свойства можно использовать с любым из предыдущих методов:

const themeColor = document.getElementById('color-picker').value; // use with inline style document.body.style=`--theme-color: $;`; // use in CSSOM const stylesheet = document.styleSheets[0]; stylesheet.insertRule(`:root < --theme-color: $; >`);

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

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

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

Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.

Когда стоит применять пользовательские свойства

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

Итоги

Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:

Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
Я перекрываю существующие сторонние стили?
Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?

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

Читать:

Как поменять шрифт в html css