너비가 다른 필드의 CSS 모범 사례

Question

HTML 페이지에서 모든 스타일을 제거하는 방법에 대해 상사와 논의했지만 약간의 문제가있었습니다. 우리의 양식 필드에는 다양한 너비가 있으며 나는 일을 올바르게하고 싶습니다. 이것을 달성하기위한 "올바른 방법"/ 모범 사례는 무엇입니까?

우리는 CSS 클래스 "에 textField"

.textField { 
    background-color: White; 
    border: 1px solid gray; 
    color: Black; 
    font-family: Tahoma; 
    font-size: 11px; 
    font-weight: bold; 
    text-align: left; 
} 

그래서 우리는 HTML 페이지에서 style='width:100px'로 유지해야 있나요?

너비와 함께 다른 클래스를 만들고 함께 사용해야합니까?

예 :

size100 { 
    width: 100px 
} 

size200 { 
    width: 200px 
} 

하고 class="textField size100"를 사용할 수 있습니까? 나는 size100이라는 이름이 좋은 습관이 아니라는 것을 안다. 이것이 좋은 방법이라면, 나는 대신 어떤 이름을 사용해야 하는가?

더 좋은 방법이 있습니까?

text-medium 
text-small 
text-large 

을 그리고 다음과 같은 규칙을 넣어 :

Answer 1

이들처럼 비 표현 적 클래스 이름을 사용하는 것이 좋습니다

.text-medium {width: 200px;} 

주요 이유는 다음과 같습니다

1. 그것은 이해할 수 있습니다.
2. 크기에 의존하지 않습니다.
3. 크기를 변경하거나 반응 적으로해야하는 경우 규칙 이름 대신 CSS에서 값을 변경하면됩니다. : 부트 스트랩 프레임 워크에서 사용되는 같은

Answer 2

또 다른 방법은, 당신의 형태로 그리드 시스템을 사용하고 있습니다 : http://getbootstrap.com/css/#forms-control-sizes

검사 위의 링크, 그는 모든에서 사용할 수 있습니다, 다른 열 크기와 클래스를 사용하여 귀하의 양식.

<input class="form-control input-lg" type="text" placeholder=".input-lg"> 

여기서, input-lg = large, input-sm = small.

Answer 3

언급 한 것처럼 여러 클래스를 사용합니다. 클래스 = "에 textField 작은"클래스 = "텍스트 필드] 매체"...

.textField { 
    background-color: White; 
    border: 1px solid gray; 
    color: Black; 
    font-family: Tahoma; 
    font-size: 11px; 
    font-weight: bold; 
    text-align: left; 
} 

.textField.small { 
    width:100px; 
} 

.textField.medium { 
    width:200px; 
} 

한 번 입력 스타일을 쓰기 만 필요한 것을 변경이 방법. 미래에 테두리 (또는 색상, 배경 등)를 변경하려면 여러 클래스를 업데이트하지 않고 한 지점에서 변경할 수 있습니다.