5
\$\begingroup\$

I've been given a task to create elements with some special corners, and those elements should be responsive.

This works, but am I wondering if something better could come up. Less code to maintain.

I wish NOT to use any CSS Preprocessor. I prefer the more readable pure and simple CSS.

jsFiddle

<div class="module-wrapper">
<div class="title">
  <div class="sub-module">  
      <p class="title">
          Jump Session Outdoor Editon
      </p>
  </div>
</div>    
<div class="sub-module type">
    <p>Party</p>
</div>
<div class="local">
  <div class="sub-module">  
      <p>
          London
      </p>
  </div>
</div>
</div>

CSS:

p{
  margin: 0;
  padding: 0;
}

.module-wrapper {
    width: 20%;
    margin: 40px auto;
}

.sub-module {
  margin: 0 -5px;
}

.sub-module p {
    padding: 10px;
    color: white;
    text-align: center;
}

.type {
    background-color: red;
}

.local {
  background: black;
  padding-bottom: 5px;
}


.local p {
    background-color: black;
}

.title {
  background: green;
  padding-top: 5px;
}

.title p {
    background-color: green;
}
\$\endgroup\$
0
2
\$\begingroup\$

Yes, you can reduce your markup! How small? This small:

<div class="module-wrapper">
  <div class="title">Jump Session Outdoor Editon</div>    
  <div class="type">Party</div>
  <div class="locale">London</div>
</div>

How? With pseudo elements. http://codepen.io/cimmanon/pen/sIgju

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;
}
.module-wrapper:before, .module-wrapper:after {
  content: '';
  display: block;
  height: 10px;
}
.module-wrapper > :first-child, .module-wrapper > :last-child {
  position: relative;
}
.module-wrapper > :first-child:before, .module-wrapper > :last-child:after {
  content: '';
  display: block;
  background-color: inherit;
  height: 10px;
  position: absolute;
  left: 10px;
  right: 10px;
}
.module-wrapper > :first-child:before {
  top: -10px;
}
.module-wrapper > :last-child:after {
  bottom: -10px;
}
.module-wrapper div {
  padding: 15px;
}
.module-wrapper .title {
  background: green;
}
.module-wrapper .type {
  background-color: red;
}
.module-wrapper .locale {
  background: black;
}

Now I know you're convinced that you don't need a CSS Preprocessor because you're certain that vanilla CSS is more readable. But what if you wanted to change the size of your corner cut-outs? How do you know which value you need to change? Here's the Sass I used to generate the above CSS:

$corner-width: 10px;
$corner-height: 10px;

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;

  // the pseudo elements here prevent us from having
  // to do the math on the parent element's margin
  // to ensure there's no overlap from preceding/
  // following elements
  &:before, &:after {
    content: '';
    display: block;
    height: $corner-height;
  }

  > :first-child, > :last-child {
    position: relative;
  }

  // this is where the illusion of the "corner"
  // happens
  > :first-child:before, > :last-child:after {
    content: '';
    display: block;
    background-color: inherit;
    height: $corner-height;
    position: absolute;
    left: $corner-width;
    right: $corner-width;
  }

  > :first-child:before {
    top: -$corner-height;
  }

  > :last-child:after {
    bottom: -$corner-height;
  }

  // pretty up our child elements
  div {
    padding: 15px;
  }

  .title {
    background: green;
  }

  .type {
    background-color: red;
  }

  .locale {
    background: black;
  }
}

With the use of variables, I only need to make 2 adjustments and everything is recalculated for me. Since the padding on the child elements and the margin on the parent element is not using the variables, I know that I am free to change them without it affecting the corners.

I am almost certain you mean "locale" for your class name, not "local".

If your CSS goes away, does your content still make sense? If not, then you may need something more to give it some context. A table may be appropriate here.

If you ever have a class called "title", that's almost a sure sign that you should be using an h1-h6 element instead.

\$\endgroup\$
1
\$\begingroup\$
  1. Your div structure may be the minimum you can get away with. module-wrapper holds the whole thing, and the sub-modules are required to differentiate the pieces.

  2. I have no idea what your statement, "I wish NOT to use any CSS compressor, I prefer the more readable pure and simple CSS" means. CSS compressors allow you to write in "readable, pure and simple" CSS and then compress the source for consumption by a browser. It also has nothing whatsoever to do with your question.

  3. For maintainability, I strongly recommend using a CSS aid such as LESS. Defining variables and other programmatic constructs for CSS will reduce your maintenance loading over the long term.

\$\endgroup\$
2
  • \$\begingroup\$ Sorry. I've corrected my statement about CSS "Compressor". I've used "preprocessor", because that's what I had in mind. Hence, the statement about the read, and write difficulties when compared to pure, clean, css code. \$\endgroup\$
    – MEM
    Sep 25 '14 at 8:09
  • \$\begingroup\$ Maintainability comes with using the preprocessor. Don't let purity get in the way of getting the real job done. \$\endgroup\$ Sep 25 '14 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.