Как мне реорганизовать мой код, чтобы сделать его более кратким без использования SASS? - PullRequest
Новая
       5

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

2 голосов
/ 25 апреля 2020

Я сделал простую форму регистрации, используя это HTML. Правильно ли я разделяю свой код здесь или есть какой-то код, который я мог бы удалить / изменить?

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

<body>
    <form action="#" class="form">
      <div class="img-overlay"></div>
      <div class="icon"><i class="fas fa-times"></i></div>
      <h1>Join our community of developers from all over the world</h1>
      <div class="form-box">
        <div class="email">
          <label for="email">email</label>
          <input id="email" type="email" placeholder="email" />
        </div>
        <div class="password">
          <label for="password">password</label>
          <input id="password" type="password" placeholder="password" />
        </div>
        <div class="password2">
          <label for="password2">confirm password</label>
          <input
            id="password2"
            type="password"
            placeholder="confirm password"
          />
        </div>
      </div>
      <input type="submit" class="button" value="Sign Up" />
      <p>Already have an account</p>
    </form>
  </body>

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

.form {
  background-image: linear-gradient(#1391ff, #0145ff);
  width: 400px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 16px;
  padding: 120px 50px;
  box-shadow: 2px 2px 8px #0000008f;
}

.img-overlay::before {
  content: "";
  background-image: url("https://cdn.pixabay.com/photo/2017/09/06/13/18/mosaic-2721424_960_720.jpg");
  position: absolute;
  /* transform: translate(-50%, -20%); */
  left: 0;
  top: 0;
  opacity: 0.18;
  width: 400px;
  height: 600px;
  border-radius: 16px;
  z-index: -1;
}
.icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.589);
}

.form h1 {
  color: white;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 3rem;
}

.email {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}

#email,
#email::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.password {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}

#password,
#password::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.password2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 2.5rem;
  font-size: 0.7rem;
}

#password2,
#password2::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.button {
  width: 100%;
  background: white;
  border: none;
  border-radius: 30px;
  padding: 14px 14px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #0145ff;
  outline: none;
}

.button:hover {
  width: 100%;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 14px 14px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  transition: 0.3s ease-in-out;
  outline: none;
  cursor: pointer;
}

p {
  color: rgba(255, 255, 255, 0.473);
  font-size: 0.8rem;
}

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

Ответы [ 3 ]

1 голос
/ 25 апреля 2020

Класс полезности

1 в стиле css повторно много раз в html

  • создать служебный класс в css
.text-orange {
    color: orange
}
  • применить имя служебного класса в html
<div class="text-orange">Lorem</div>
<p class="text-orange">Lorem</p>

1 группа стилей в css повторно много раз в html

  • создание служебного класса в css 
.flex-col-center-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
  • применить имя класса утилиты в html
<div class="flex-col-center-start">box1</div>
<div class="flex-col-center-start">box2</div>

Это то же самое, что вы используете Tailwind , Bootstrap или Материализация

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

Используйте служебный класс без добавления имени класса к html

  • Если вы все еще хотите использовать код таким образом, не добавляя имя утилиты в html, вы можете попробовать функцию sass -> @extend, вы можете посмотреть этот пример здесь
0 голосов
/ 25 апреля 2020

Ваш css со временем станет стройнее - не переживайте. Ваши методы появятся с практикой.

Некоторые очень быстрые победы:

1) не объявляйте значения заново без необходимости 

.button {
  width: 100%;
  border-radius: 30px;
  padding: 14px 14px;

}

.button:hover {
  width: 100%;
  border-radius: 30px;
  padding: 14px 14px; 
}

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

2) Сгруппировать правила там, где имеет смысл 

.email,
.password,
.password2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

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

<a class="btn btn-large btn-primary btn-a-million-other-classes-that-have-to-be-removed-in-your-markup-if-your-client-changes-their-mind">Click</a>

Наконец, я бы порекомендовал пересмотреть SASS - это делает для более организованного (и повторно используемого) кода. В этом случае вы могли бы сделать go: 

.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

И затем в любое время, когда захотите его использовать: 

.email {
  @extend .flex-center;
}

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

0 голосов
/ 25 апреля 2020

Вы можете добавить некоторые классы к своим элементам и разместить там общие стили. Элементы, имеющие id, могут без проблем иметь class или даже несколько классов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...