Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Rows and cols: Old-school attributes aren't obsolete

Although CSS is versatile, HTML rows and cols attributes still retain value. They provide a baseline capacity for characters and lines that cater to accessibility and maintain usability if CSS fails to load:

/* 
  Old-school yet dependable as a Swiss watch.
  50 characters wide, 4 lines high.
*/
<textarea rows="4" cols="50"></textarea>


Fluid dimensions: Achieving responsiveness

Utilize percentage values for width and height in CSS to maintain optimal responsiveness. textarea will then adapt seamlessly to different screen sizes:

/* Width: Like a considerate party guest, takes up just enough space.*/
textarea {
  width: 80%;
  height: 20vh;
}


Min and max: Playing safe

Deploy min-max properties in CSS to handle a variety of device sizes and prevent an unmanageably large or small textarea:

/* 
  Goldilocks principle of height: 
  not too tall, not too short, just right.
*/
textarea {
  min-height: 100px;
  max-height: 300px;
}


Deploying external stylesheets: Consistency across forms

Use external stylesheets to scale your project easily while maintaining clean, maintainable code:

/* 
  Single line of duty: Cater to all form controls,
  so they look uniform as soldiers on parade.
*/
.form-control {
  width: 100%; height: auto;
  min-height: 100px;
}


Flex and resize: Improve user experience

Allow textarea resizing by user to enhance interactivity and cater to varying content lengths:

/* Give them some freedom, let them resize! */
textarea {
  resize: vertical;
}


For dynamic expansion, set height to auto and use rows to specify minimum visible lines:

/* This textarea stretches like a yoga master. */
textarea {
  height: auto;
}


Semantics: HTML vs CSS

Understand the distinction between HTML's semantic layout attributes and CSS's visual formatting properties:

<!-- HTML focuses on meaning, CSS on beauty. -->
<textarea rows="5" style="width: 100%; height: auto;"></textarea>


Traps and testing: Ensuring usability

Avoid creating scrollbars and extra whitespace. Test your styles across different browsers and frameworks, like AngularJS:

/* Making sure your textarea doesn’t turn into a unicycle on mobile */
@media (max-width: 600px) {
  /* Grows and shrinks like a Cheshire cat ;) */
  textarea {
    width: 100%;
  }
}


Default attributes: Providing a basic fallback

Always set default cols and rows for fallback to prevent a dysfunctional form in case CSS files fail to load:

/* Like an old friend, it's reliable when all else fails. */
<textarea rows="5" cols="33"></textarea>


Meeting industry standards with CSS

Align with industry standards by applying CSS for layout control and aesthetics, enhancing forward compatibility.