İçeriğe geç

.Net Core ve React ile CSS sınıfı isimlerini nasıl gizlersiniz

Çoğunlukla basamaklama nedeniyle, CSS’den hoşlanmadığım durumlar olmuştu. Bileşen tabanlı geliştirmenin modern çağında, bu terminolojinin size daha uygun olması durumunda, Uygulamalarımızın Ön Uç uygulamalarımızın veya Ön Uç bölümümüzün ölçeklenebilirliğini düzeltmeyi react ile sonunda başardım. Bir HTML elemanının DOM’da bu şekilde sonuçlanabileceği birden fazla CSS sınıfına sahip olması gereken birçok kullanım durumu vardır.

<button class="button button-color-red button--active">Title</button>

Çözüm

CSS modülleri, CSS’deki kapsülleme problemini çözmektedir. UI’deki global ad alanı, JS’deki global kapsamla karşılaştırılabilir. Herhangi bir ciddi uygulamada global değişkenler kullanmaktan kaçınmanın ne kadar önemli olduğunu vurgulamama gerek yok.

Uygulama

Button.scss

.button {
  font-size: 20px;
  color: black;
}
.button--color-red {
  color: red;
}
.button--active {
  color: green;
}

Button.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import styles from './css/Button.scss';
const cx = classNames.bind(styles);
const Button = ({ label, color, isActive }) => {
  const cssClasses = cx({
    'button': true,
    'button--color-red': (color === 'primary'),
    'button--active': isActive,
  });
return (
    <button className={cssClasses}>
      {label}
    </button>
  );
};
Button.propTypes = {
  label: PropTypes.string,
  color: PropTypes.string,
  isActive: PropTypes.bool,
};
export default Button;

webpack.config.js

{ 
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[sha1:hash:hex:4]'
      }
    }
  ]
}

modules özelliği, Webpack’e sınıf adlarının gizlenmesi gerektiğini söyler. Developer modun’da false olarak ayarlayabilirsiniz ve sınıf isimleri CSS dosyasındakiyle aynı kalır.

localIdentName özelliği, gizleme sonrasında sınıf adlarının biçimi için yapılandırmadır. [sha1: hash: hex: 4] – bu yapılandırma sha1 ile kodlanmış 4 harfli sınıf isimleri verecektir. Güvenli kullanım için 4 karakterin çok az olduğunu düşünüyorsanız, daha fazlasını eklemek için çekinmeyin.

Bu yaklaşımı kim kullanıyor?

Sadece Google ve Facebook.. Ehh kimse büyük değil 🙂

 2,308 Görüntüleme

Kategori:.Net CoreCssHtmlJava ScriptReact

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir